@charset "utf-8";


/*====================
    1. General Code
==========================*/

:root {
    --primary-color: #e63946;
    --primary-hover: #c92f3b;
    --secondary-color: #111827;
    --text-color: #4b5563;
    --heading-color: #111827;
    --muted-color: #6b7280;
    --light-bg: #f8fafc;
    --border-color: #e5e7eb;
    --white: #ffffff;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0 !important;
    overflow-x: hidden;
    color: var(--text-color);
    background: var(--white);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/*----------------------
    1.1. Typography
------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-weight: 800;
    margin: 0 auto 15px;
    line-height: 1.2;
}

h1 {
    font-size: clamp(38px, 5vw, 56px);
}

h2 {
    font-size: clamp(32px, 4vw, 44px);
}

h3 {
    font-size: clamp(24px, 3vw, 30px);
}

h4 {
    font-size: 22px;
}

h5 {
    font-size: 19px;
    line-height: 1.6;
}

h6 {
    font-size: 17px;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-weight: 400;
}

p {
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    margin: 0 0 16px;
    color: var(--text-color);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}


/*----------------------
    Lists
------------------------------*/

ul,
ol {
    margin: 0 auto 20px;
}

ul li,
ol li {
    font-size: 16px;
    line-height: 26px;
    margin: 0 auto 10px;
}

ul li i,
ol li i {
    margin: 0 12px 0 0;
}

ul.list_style_none,
ol.list_style_none {
    list-style: none;
    padding-left: 0;
}

ul.list-with-icon {
    padding-left: 10px;
    margin-bottom: 30px;
}

ul.list-with-icon li {
    line-height: 20px;
    margin-bottom: 15px;
    padding-left: 23px;
    position: relative;
    list-style: none;
}

ul.list-with-icon li i {
    left: 0;
    position: absolute;
    top: 4px;
}


/*----------------------
    Blockquote
------------------------------*/

blockquote {
    background: var(--light-bg);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-sm);
    padding: 20px 25px;
    margin: 25px 0;
    color: var(--text-color);
}


/*----------------------
    Utility Classes
------------------------------*/

.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text p {
    color: var(--white);
}

.uppercase {
    text-transform: uppercase;
}

.underline {
    text-decoration: underline;
}

.divider {
    border-bottom: 1px solid var(--border-color);
    clear: both;
    margin: 40px auto;
}


/*----------------------
    Selection
------------------------------*/

::selection {
    background: var(--primary-color);
    color: var(--white);
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--white);
}


/*----------------------
    Responsive Typography
------------------------------*/

@media (max-width: 767px) {

    body {
        font-size: 15px;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 16px;
    }

    ul li,
    ol li {
        font-size: 15px;
    }

    .divider {
        margin: 30px auto;
    }
}

/*-----------------
    1.2. Buttons
-------------------------*/

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid transparent;
    border-radius: 8px;

    color: var(--white);
    background: var(--primary-color);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;

    min-height: 46px;
    margin: auto;
    padding: 11px 28px;

    cursor: pointer;
    overflow: hidden;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn:hover,
.btn:focus {
    color: var(--white);
    background: var(--primary-hover);
    outline: none;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.22);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn .fa {
    font-size: 16px;
    margin-left: 3px;
    vertical-align: middle;
}


/*-----------------
    Large Button
-------------------------*/

.btn.btn-lg {
    min-height: 58px;
    font-size: 17px;
    line-height: 1.4;
    padding: 15px 36px;
    border-radius: 10px;
}

.btn.btn-lg:hover {
    background: var(--primary-hover);
}


/*-----------------
    Small Button
-------------------------*/

.btn.btn-xs {
    min-height: 34px;
    font-size: 12px;
    padding: 6px 18px;
    border-radius: 6px;
}

.btn.btn-xs .fa {
    margin: 0 5px;
    font-size: 13px;
}


/*-----------------
    Outline Button
-------------------------*/

.btn.outline {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn.outline:hover,
.btn.outline:focus {
    color: var(--white);
    background: var(--primary-color);
    border-color: var(--primary-color);
}


/*-----------------
    Button Link
-------------------------*/

.btn-link {
    color: var(--primary-color);
    font-weight: 800;
    background: transparent;
    border: none;
    padding: 0;
    min-height: auto;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--primary-hover);
    background: transparent;
    box-shadow: none;
    transform: none;
}


/*-----------------
    Arrow Circle
-------------------------*/

.angle_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    margin-left: 4px;

    background: var(--white);
    color: var(--primary-color);

    border-radius: 50%;

    vertical-align: middle;

    transition: var(--transition);
}

.btn .angle_arrow .fa {
    display: block;
    font-size: 14px;
    line-height: 1;
    margin: 0;
}

.btn:hover .angle_arrow {
    transform: translateX(3px);
}


/*-----------------
    Active Button
-------------------------*/

.btn.outline.active-btn {
    color: #089901;
    background: transparent;
    border-color: #089901;
}

.btn.outline.active-btn:hover {
    color: var(--white);
    background: #089901;
    border-color: #089901;
}


/*====================================================
    GLOBAL PRIMARY COLOR SYSTEM
======================================================*/

/* Primary text/color elements */

a,
.btn-link,
.car-title-m h6 a:hover,
.featured-car-content > h6 a:hover,
.footer-top ul li a:hover,
.get-intouch a:hover,
.blog-content h5 a:hover,
.blog-info-box li a:hover,
.control-label span,
.angle_arrow i,
.contact_detail li a:hover,
.team_more_info p a:hover,
.error_text_m h2,
.search_btn,
.popular_post_title a:hover,
.categories_list ul li a:hover,
.categories_list ul li a:hover:after,
.article_meta ul li a:hover,
.articale_header h2 a:hover,
.btn.outline,
.share_article ul li,
.contact-info a:hover,
.social-follow a:hover,
.radio input[type=radio]:checked + label:before,
.checkbox input[type=checkbox]:checked + label:before,
.product-listing-content h5 a:hover,
.pricing_info .price,
.text-primary,
.footer_widget ul li a:hover,
.header_search button:hover,
.header_widgets a:hover,
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li:focus a,
.navbar-default .navbar-nav > li:hover a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover,
.my_vehicles_list ul.vehicle_listing li a:hover,
.dealer_contact_info a:hover,
.widget_heading i,
.dealers_listing .dealer_info h5 a:hover,
.main_features ul li p,
.listing_detail_head .price_info p,
.listing_other_info button:hover,
.compare_info table td i,
.compare_info table th i,
#accessories i,
.price,
.inventory_info_list ul li i,
.services_info h4 a:hover,
.about_info .icon_box,
.header_style2 .navbar-nav > li > .dropdown-menu a:hover,
.header_style2 .navbar-default .navbar-nav li:hover .dropdown-menu li a:hover,
.header_style2 .dropdown-menu > .active > a,
.header_style2 .dropdown-menu > .active > a:focus,
.header_style2 .dropdown-menu > .active > a:hover,
.header_style2 .dropdown-menu > li > a:focus,
.header_style2 .dropdown-menu > li > a:hover {
    color: var(--primary-color);
    fill: var(--primary-color);
}


/* Link hover */

a:hover,
a:focus,
.btn-link:hover {
    color: var(--primary-hover);
    fill: var(--primary-hover);
}


/*====================================================
    PRIMARY BACKGROUND ELEMENTS
======================================================*/

.btn,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.recent-tab .nav.nav-tabs li.active a,
.fun-facts-m,
.featured-icon,
.owl-pagination .owl-page.active,
#testimonial-slider .owl-pagination .owl-page.active,
.social-follow.footer-social a:hover,
.back-top a,
.team_more_info ul li a:hover,
.tag_list ul li a:hover,
.pagination ul li.current,
.pagination ul li:hover,
.btn.outline:hover,
.btn.outline:focus,
.share_article ul li:hover,
.nav-tabs > li a:hover,
.nav-tabs > li a:focus,
.label-icon,
.navbar-default .navbar-toggle .icon-bar,
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.label_icon,
.navbar-nav > li > .dropdown-menu,
.add_compare .checkbox,
.search_other,
.vs,
.td_divider,
.search_other_inventory,
#other_info,
.main_bg,
.slider .slider-handle,
.slider .slider-selection {
    background: var(--primary-color);
    fill: var(--primary-color);
}


/*====================================================
    PRIMARY HOVER BACKGROUND
======================================================*/

.btn:hover,
.btn:focus,
.search_other:hover,
#other_info:hover {
    background-color: var(--primary-hover);
    fill: var(--primary-hover);
}


/*====================================================
    PRIMARY BORDERS
======================================================*/

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.social-follow.footer-social a:hover,
.page-header,
.tag_list ul li a:hover,
.btn.outline,
.share_article ul li,
blockquote,
.social-follow a:hover,
.radio label:before,
.navbar-default .navbar-toggle,
.owl-buttons div,
.about_info .icon_box {
    border-color: var(--primary-color);
}


/*====================================================
    SPECIAL BORDER / TRIANGLE ELEMENTS
======================================================*/

.recent-tab .nav.nav-tabs li.active::after {
    border-color:
        var(--primary-color)
        transparent
        transparent;
}

.td_divider:after {
    border-color:
        transparent
        transparent
        transparent
        var(--primary-color);
}


/*====================================================
    DROPDOWN
======================================================*/

.navbar-nav > li > .dropdown-menu li {
    border-bottom: 1px solid var(--primary-hover);
}


/*====================================================
    MOBILE
======================================================*/

@media (max-width: 767px) {

    .btn {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 22px;
        border-radius: 7px;
    }

    .btn.btn-lg {
        min-height: 52px;
        font-size: 16px;
        padding: 13px 28px;
    }

    .btn.btn-xs {
        min-height: 32px;
        font-size: 11px;
        padding: 5px 15px;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--primary-color);
    }
}



/*-------------------------
    1.3. Dark Overlay
---------------------------------*/

.div_zindex {
    position: relative;
    z-index: 1;
}

.dark-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.62);

    z-index: 0;
    pointer-events: none;
}


/*-------------------------------------
    1.4. Space Margins and Padding
------------------------------------------------*/

.padding_none {
    padding: 0 !important;
}

.padding {
    padding: 20px 0;
}

.padding_50px {
    padding: 50px 0;
}

.padding_4x4_30 {
    padding: 30px;
}

.padding_4x4_40 {
    padding: 40px;
}


/*-------------------------
    Vertical Spacing
-----------------------------*/

.space-20,
.space-30,
.space-40,
.space-60,
.space-80 {
    width: 100%;
    clear: both;
}

.space-20 {
    height: 20px;
}

.space-30 {
    height: 30px;
}

.space-40 {
    height: 40px;
}

.space-60 {
    height: 60px;
}

.space-80 {
    height: 80px;
}


/*-------------------------
    Margins
-----------------------------*/

.margin-btm-20 {
    margin-bottom: 20px;
    clear: both;
}

.margin-none {
    margin: 0 !important;
}


/*-------------------------
    Responsive Spacing
-----------------------------*/

@media (max-width: 767px) {

    .padding {
        padding: 15px 0;
    }

    .padding_50px {
        padding: 35px 0;
    }

    .padding_4x4_30 {
        padding: 22px;
    }

    .padding_4x4_40 {
        padding: 25px;
    }

    .space-60 {
        height: 45px;
    }

    .space-80 {
        height: 55px;
    }
}


/*-----------------
    1.5. Forms
---------------------------*/

.form-group {
    margin-bottom: 20px;
    position: relative;
}


/*-------------------------
    Form Labels
-----------------------------*/

.form-label {
    display: block;
    color: var(--heading-color);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 8px;
}


/*-------------------------
    Form Controls
-----------------------------*/

.form-control {
    width: 100%;
    height: 48px;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 8px;

    box-shadow: none;

    color: var(--heading-color);

    font-family: inherit;
    font-size: 15px;
    font-weight: 400;

    line-height: 1.5;

    padding: 0 15px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.form-control:hover {
    border-color: #d1d5db;
}

.form-control:focus {
    border-color: var(--primary-color);
    background: var(--white);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(230, 57, 70, 0.10);
}


/*-------------------------
    Select
-----------------------------*/

.select {
    position: relative;
}

.select select {
    width: 100%;

    appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;

    padding-right: 42px;
    cursor: pointer;
}

.select::after {
    position: absolute;

    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    color: #6b7280;

    content: "\f107";

    cursor: pointer;

    font-family: "FontAwesome";
    font-size: 14px;

    pointer-events: none;

    transition: var(--transition);
}

.select:focus-within::after {
    color: var(--primary-color);
}


/*-------------------------
    Select Options
-----------------------------*/

.form-control option {
    padding: 10px;
}


/*-------------------------
    Control Label
-----------------------------*/

.control-label {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
}


/*-------------------------
    Radio & Checkbox
-----------------------------*/

.radio,
.checkbox {
    padding-top: 5px;
}

.radio label,
.checkbox label {
    position: relative;

    display: inline-block;

    cursor: pointer;

    color: var(--text-color);

    font-size: 14px;
    font-weight: 400;

    line-height: 22px;

    padding-left: 28px;
}


/* Hide original controls */

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    display: none;
}


/*-------------------------
    Radio Circle
-----------------------------*/

.radio label:before {
    position: absolute;

    left: 0;
    top: 3px;

    width: 16px;
    height: 16px;

    background: var(--white);

    border: 1.5px solid #cbd5e1;
    border-radius: 50%;

    content: "";

    transition: var(--transition);
}

.radio label:hover:before {
    border-color: var(--primary-color);
}

.radio input[type="radio"]:checked + label:before {
    border-color: var(--primary-color);

    box-shadow:
        inset 0 0 0 4px var(--white);

    background: var(--primary-color);

    content: "";
}


/*-------------------------
    Checkbox
-----------------------------*/

.checkbox label::before {
    position: absolute;

    left: 0;
    top: 3px;

    width: 17px;
    height: 17px;

    background: var(--white);

    border: 1.5px solid #cbd5e1;
    border-radius: 4px;

    content: "";

    transition: var(--transition);
}

.checkbox label:hover::before {
    border-color: var(--primary-color);
}

.checkbox input[type="checkbox"]:checked + label::before {
    background: var(--primary-color);
    border-color: var(--primary-color);

    color: var(--white);

    content: "\f00c";

    font-family: "FontAwesome";
    font-size: 10px;

    line-height: 15px;
    text-align: center;
}


/*-------------------------
    Dark Input
-----------------------------*/

.black_input .form-control {
    background: #1f2937;

    border: 1px solid #374151;
    border-radius: 8px;

    color: var(--white);

    font-size: 15px;
}

.black_input .form-control::placeholder {
    color: #9ca3af;
}

.black_input .form-control:hover {
    border-color: #4b5563;
}

.black_input .form-control:focus {
    background: #111827;

    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(230, 57, 70, 0.15);
}


/*-------------------------
    White Background Input
-----------------------------*/

.form-control.white_bg {
    background: var(--white);

    border: 1px solid var(--border-color);
}


/*-------------------------
    Disabled Inputs
-----------------------------*/

.form-control:disabled,
.form-control[readonly] {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}


/*-------------------------
    Mobile Forms
-----------------------------*/

@media (max-width: 767px) {

    .form-group {
        margin-bottom: 16px;
    }

    .form-control {
        height: 46px;
        font-size: 14px;
        border-radius: 7px;
    }

    .form-label {
        font-size: 13px;
    }

    .control-label {
        font-size: 13px;
    }

    .radio label,
    .checkbox label {
        font-size: 13px;
    }
}


/*-----------------
    1.6. Table
---------------------------*/

table {
    width: 100%;
    margin: 0 0 30px;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--white);
}

table th,
table td {
    padding: 16px 18px;
    border: 1px solid var(--border-color);
    text-align: left;
    vertical-align: middle;
}

table th img,
table td img {
    max-width: 100%;
    height: auto;
}

table thead {
    background: #f8fafc;
}

table thead th,
table thead td {
    color: var(--heading-color);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

table tbody tr {
    transition: var(--transition);
}

table tbody tr:hover {
    background: #fafafa;
}


/*==============================
    1.7 Section Background &
    Section Heading
================================*/

.secondary-bg {
    background-color: #1f2937;
    color: var(--white);
}

.dark-bg {
    background-color: #111827;
    color: var(--white);
}

.gray-bg {
    background: var(--light-bg);
}

.primary-bg {
    background: var(--primary-color);
    color: var(--white);
}

.section-padding {
    padding: 90px 0;
}

.section-header {
    max-width: 850px;
    padding-bottom: 45px;
}

.section-header h2 {
    margin-bottom: 18px;
    position: relative;
}

.section-header h2 span {
    font-weight: 400;
}

.section-header p {
    max-width: 700px;
    margin: 0 auto;
    color: var(--muted-color);
    font-size: 16px;
    line-height: 1.8;
}


/* Section heading accent */

.section-header h2::after {
    display: block;
    width: 55px;
    height: 3px;

    margin: 18px auto 0;

    background: var(--primary-color);
    border-radius: 10px;

    content: "";
}


/* White section heading */

.white-text .section-header p,
.dark-bg .section-header p,
.secondary-bg .section-header p,
.primary-bg .section-header p {
    color: rgba(255, 255, 255, 0.78);
}

.white-text .section-header h2::after,
.dark-bg .section-header h2::after,
.secondary-bg .section-header h2::after {
    background: var(--white);
}


/*-------------------------
    Responsive Sections
-----------------------------*/

@media (max-width: 767px) {

    .section-padding {
        padding: 60px 0;
    }

    .section-header {
        padding-bottom: 32px;
    }

    .section-header h2 {
        margin-bottom: 14px;
    }

    .section-header p {
        font-size: 15px;
    }

    table {
        font-size: 14px;
    }

    table th,
    table td {
        padding: 12px;
    }

    table thead th,
    table thead td {
        font-size: 11px;
    }
}


/*--------------------
    1.8 Tabs
------------------------------*/

.nav.nav-tabs {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;

    border: none;
    margin-bottom: 20px;
}

.nav-tabs > li {
    margin-bottom: 0;
}

.nav-tabs > li a {
    display: block;

    background: #f3f4f6;

    border: 1px solid transparent;
    border-radius: 7px;

    color: var(--text-color);

    font-size: 14px;
    font-weight: 800;

    margin-right: 0;
    padding: 10px 24px;

    text-align: center;

    transition: var(--transition);
}

.nav-tabs > li a:hover,
.nav-tabs > li a:focus {
    color: var(--primary-color);
    background: #fff;
    border-color: var(--border-color);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--white);
    background: var(--primary-color);
    border-color: var(--primary-color);
}


/*-------------------------
    1.9. Parallax Background
-----------------------------*/

.parallex-bg {
    position: relative;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    background-attachment: fixed;
}


/*
    Disable fixed background on mobile.
    This prevents performance issues on
    many mobile browsers.
*/

@media (max-width: 767px) {

    .parallex-bg {
        background-attachment: scroll;
    }
}


/*------------------------
    1.10. Modal
--------------------------------*/

.modal-dialog {
    width: 650px;
    max-width: calc(100% - 30px);
    margin: 30px auto;
}

.modal-content {
    padding: 0 32px 25px;

    background: var(--white);

    border: none;
    border-radius: var(--radius-lg);

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 0;
    margin-bottom: 20px;

    border-bottom: 1px solid var(--border-color);
}

.modal-body {
    padding: 10px 0;
}

.modal .modal-header .close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-top: 0;

    background: #f3f4f6;

    border: none;
    border-radius: 50%;

    color: var(--heading-color);

    font-size: 16px;
    line-height: 1;

    opacity: 1;
    text-align: center;
    text-shadow: none;

    transition: var(--transition);
}

.modal .modal-header .close:hover {
    background: var(--primary-color);
    color: var(--white);

    transform: rotate(90deg);
}


/* Mobile modal */

@media (max-width: 767px) {

    .modal-dialog {
        width: auto;
        max-width: calc(100% - 24px);
        margin: 12px auto;
    }

    .modal-content {
        padding: 0 20px 20px;
        border-radius: 14px;
    }

    .modal-header {
        padding: 16px 0;
        margin-bottom: 15px;
    }
}


/*================
     2. Header
===========================*/

.default-header {
    position: relative;

    background: rgba(255, 255, 255, 0.96);

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);

    padding: 20px 0;

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        padding 0.3s ease;

    z-index: 1000;
}


/* Sticky header */

.nav-stacked.affix {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.97);

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.09);

    padding: 12px 0;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    z-index: 1000;
}


/*-------------------------
    Logo
-----------------------------*/

.logo {
    float: left;
    position: relative;
    z-index: 2;
}

.logo img {
    max-width: 100%;
    height: auto;
    display: block;
}


/*-------------------------
    Header Information
-----------------------------*/

.header_info {
    float: right;
    text-align: right;
}


/*-------------------------
    Social Follow
-----------------------------*/

.social-follow {
    display: inline-block;

    margin-left: 20px;
    margin-top: 0;

    vertical-align: middle;
}

.social-follow ul {
    padding: 0;
    margin: 0;
}

.social-follow ul li {
    display: inline-block;

    vertical-align: middle;

    list-style: none;

    margin: 0 3px;
}

.social-follow ul li a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    color: var(--text-color);

    font-size: 16px;

    transition: var(--transition);
}

.social-follow ul li a:hover {
    background: var(--primary-color);
    color: var(--white);

    transform: translateY(-2px);
}

.social-follow li i {
    margin-right: 5px;
}


/*-------------------------
    Login Button
-----------------------------*/

.login_btn {
    display: inline-block;

    margin-left: 10px;

    vertical-align: middle;
}


/*-------------------------
    Circle Icon
-----------------------------*/

.circle_icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    float: left;

    margin-right: 10px;

    border: 1px solid var(--border-color);
    border-radius: 50%;

    background: var(--white);

    color: var(--text-color);

    font-size: 16px;

    transition: var(--transition);
}

.circle_icon:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: var(--white);

    transform: translateY(-2px);
}


/*-------------------------
    Header Text
-----------------------------*/

.uppercase_text {
    color: var(--heading-color);

    font-size: 13px;
    font-weight: 800;

    line-height: 17px;

    margin: 0;

    text-transform: uppercase;
    letter-spacing: 0.3px;
}


/*-------------------------
    Header Widgets
-----------------------------*/

.header_widgets {
    display: inline-block;

    width: 260px;

    text-align: left;
}

.header_widgets a {
    color: var(--text-color);
}

.header_widgets a:hover {
    color: var(--primary-color);
}


/*-------------------------
    Header Wrap
-----------------------------*/

.header_wrap {
    float: right;
}


/*-------------------------
    Header Search
-----------------------------*/

.header_search {
    float: right;

    padding: 10px 0;

    position: relative;
}

#header-search-form::after {
    position: absolute;

    right: 9px;
    top: -13px;

    display: none;

    border-color:
        transparent
        transparent
        var(--white);

    border-style: solid;
    border-width: 7px;

    content: "";
}

.header_search input {
    width: 227px;
    height: 40px;

    padding: 0 45px 0 15px;

    background: #f8fafc;

    border: 1px solid var(--border-color);
    border-radius: 8px;

    color: var(--heading-color);

    transition: var(--transition);
}

.header_search input:focus {
    background: var(--white);

    border-color: var(--primary-color);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(230, 57, 70, 0.08);
}

.header_search button {
    position: absolute;

    right: 10px;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    padding: 0;

    background: transparent;

    border: none;

    color: var(--text-color);

    font-size: 14px;

    transform: translateY(-50%);

    transition: var(--transition);
}

.header_search button:hover {
    color: var(--primary-color);
}


/*-------------------------
    Search Toggle
-----------------------------*/

#search_toggle {
    display: none;

    border: 1px solid var(--border-color);
    border-radius: 7px;

    cursor: pointer;

    margin-top: 1px;

    padding: 6px 11px;

    background: var(--white);

    transition: var(--transition);
}

#search_toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}


/*-------------------------
    User Login
-----------------------------*/

.user_login {
    float: left;

    margin: 18px 10px 17px 0;

    border: 1px solid var(--border-color);
    border-radius: 7px;

    background: var(--white);

    overflow: hidden;
}

.user_login ul {
    padding: 0;
    margin: 0;
}

.user_login ul li {
    line-height: 17px;

    list-style: none;

    margin: 0;

    padding: 7px 15px;
}

.user_login > ul > li a {
    color: var(--heading-color);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
}

.user_login > ul > li a:hover {
    color: var(--primary-color);
}

.user_login > ul > li a i {
    margin: 0 3px 0 0;
}


/*-------------------------
    User Dropdown
-----------------------------*/

.user_login ul.dropdown-menu {
    top: 107%;

    min-width: 180px;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 10px;

    padding: 8px 0;

    box-shadow: var(--shadow-md);
}

.user_login ul.dropdown-menu li {
    padding: 0;
}

.user_login ul.dropdown-menu li a {
    display: block;

    padding: 10px 16px;

    color: var(--text-color);

    font-size: 13px;

    transition: var(--transition);
}

.user_login ul.dropdown-menu li a:hover {
    background: #f8fafc;
    color: var(--primary-color);
}


/*-------------------------
    Header Mobile
-----------------------------*/

@media (max-width: 767px) {

    .default-header {
        padding: 14px 0;
    }

    .nav-stacked.affix {
        padding: 10px 0;
    }

    .header_info,
    .header_wrap {
        float: none;
    }

    .header_widgets {
        width: auto;
    }

    .social-follow {
        margin-left: 10px;
    }

    .social-follow ul li a {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .header_search {
        width: 100%;
        float: none;
        padding: 10px 0;
    }

    .header_search input {
        width: 100%;
    }

    .user_login {
        margin: 10px 0;
    }
}




/*----------------------------------
    2.1 Navigation & Dropdown Menu
------------------------------------------*/

/*-------------------------
    Navigation Bar
-----------------------------*/

#navigation_bar {
    position: relative;

    background: var(--secondary-color);

    border: none;
    border-radius: 0;

    padding: 0;

    z-index: 999;
}

#navigation {
    padding: 0;
}

nav.navbar {
    min-height: 0;

    background: transparent;

    border: none;

    margin: 0 auto;
}


/*-------------------------
    Main Navigation
-----------------------------*/

.navbar-default .navbar-nav > li {
    position: relative;

    margin: 0;

    padding: 0;

    border-radius: 0;

    transition: var(--transition);
}


/* Remove Bootstrap default active background */

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
    background: transparent;
}


/* Last navigation item */

.nav.navbar-nav > li:last-child {
    padding-right: 0;
}


/*-------------------------
    Navigation Links
-----------------------------*/

.navbar-default .navbar-nav > li > a {
    position: relative;

    display: flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    font-weight: 800;

    line-height: 1;

    padding: 22px 20px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}


/* Animated underline */

.navbar-default .navbar-nav > li > a::before {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 10px;

    height: 2px;

    background: var(--primary-color);

    border-radius: 10px;

    content: "";

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}


/* Hover / active */

.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li > a:focus {
    color: var(--white);
    background: transparent;
}

.navbar-default .navbar-nav > li:hover > a::before,
.navbar-default .navbar-nav > li.active > a::before {
    transform: scaleX(1);
}


/*-------------------------
    Dropdown Navigation Link
-----------------------------*/

.navbar-default .navbar-nav > li.dropdown > a {
    padding-right: 42px;
}

.navbar-default .navbar-nav > li.dropdown > a::after {
    position: absolute;

    right: 19px;
    top: 50%;

    color: rgba(255, 255, 255, 0.65);

    content: "\f107";

    font-family: "FontAwesome";
    font-size: 13px;

    transform: translateY(-50%);

    transition: transform 0.3s ease, color 0.3s ease;
}

.navbar-default .navbar-nav > li.dropdown:hover > a::after {
    color: var(--primary-color);

    transform:
        translateY(-50%)
        rotate(180deg);
}


/*-------------------------
    Open Dropdown
-----------------------------*/

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    background: transparent;
    color: var(--white);

    border-radius: 0;
}


/*-------------------------
    Navigation Container
-----------------------------*/

#navigation.collapse.navbar-collapse {
    float: left;

    margin: 0;
}


/*-------------------------
    Dropdown Menu
-----------------------------*/

.navbar-nav > li > .dropdown-menu {
    min-width: 210px;

    margin: 0;

    padding: 8px;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12);
}


/* Dropdown items */

.navbar-nav > li > .dropdown-menu li {
    position: relative;

    margin: 0;

    border: none !important;
}


/* Dropdown links */

.navbar-nav > li > .dropdown-menu a {
    display: block;

    color: var(--text-color);

    font-size: 13px;
    font-weight: 700;

    padding: 11px 15px;

    border-radius: 6px;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        padding-left 0.25s ease;
}


/* Dropdown hover */

.navbar-nav > li > .dropdown-menu a:hover,
.navbar-default .navbar-nav li:hover .dropdown-menu li a:hover,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    background: #f8fafc;

    color: var(--primary-color);

    padding-left: 19px;
}


/* Dropdown active */

.navbar-nav > li > .dropdown-menu > .active > a {
    background: #fff1f2;
    color: var(--primary-color);
}


/* Last dropdown item */

.navbar-nav > li > .dropdown-menu li:last-child {
    border: none;
}


/*-------------------------
    User Dropdown
-----------------------------*/

.user_login .dropdown-menu > .active > a,
.user_login .dropdown-menu > .active > a:focus,
.user_login .dropdown-menu > .active > a:hover,
.user_login .dropdown-menu > .active > a:hover,
.user_login .dropdown-menu > li > a:focus,
.user_login .dropdown-menu > li > a:hover {
    background: #f8fafc;

    color: var(--primary-color);
}


/*====================================================
    Desktop Dropdown Animation
======================================================*/

@media (min-width: 768px) {

    .navbar-default .navbar-nav > li.dropdown:hover .dropdown-menu {
        display: block;
    }

    .navbar-nav > li > .dropdown-menu {
        top: 115%;

        display: block !important;

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(8px);

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;
    }

    .navbar-nav > li:hover > .dropdown-menu {
        top: 100%;

        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

}


/*====================================================
    Mobile Navigation
======================================================*/

@media (max-width: 767px) {

    #navigation_bar {
        background: var(--secondary-color);
    }

    #navigation.collapse.navbar-collapse {
        float: none;

        width: 100%;

        margin: 0;

        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }


    /* Main mobile links */

    .navbar-default .navbar-nav > li > a {
        display: block;

        padding: 15px 20px;

        font-size: 13px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }


    /* Remove desktop underline */

    .navbar-default .navbar-nav > li > a::before {
        display: none;
    }


    /* Mobile active state */

    .navbar-default .navbar-nav > li.active > a,
    .navbar-default .navbar-nav > li:hover > a {
        background: rgba(255, 255, 255, 0.04);

        color: var(--white);
    }


    /* Mobile dropdown */

    .navbar-nav > li > .dropdown-menu {
        position: static;

        width: 100%;

        min-width: 0;

        margin: 0;

        padding: 5px 10px;

        background: #172033;

        border: none;

        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .navbar-nav > li > .dropdown-menu a {
        color: rgba(255, 255, 255, 0.75);

        padding: 11px 15px;

        border-radius: 5px;
    }


    .navbar-nav > li > .dropdown-menu a:hover,
    .navbar-default .navbar-nav li:hover .dropdown-menu li a:hover,
    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:focus,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-menu > li > a:hover {
        background: rgba(255, 255, 255, 0.06);

        color: var(--white);

        padding-left: 18px;
    }


    /* Mobile dropdown arrow */

    .navbar-default .navbar-nav > li.dropdown > a::after {
        right: 20px;
    }

}



/*=======================
     3. Home-Page
================================*/


/*-------------------------
    3.1. Banner / Hero
-------------------------------*/

.banner-section {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;

    background-image: url("../images/banner-image.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 100px 0;

    overflow: hidden;
}


/* Dark cinematic overlay */

.banner-section::before {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.88) 0%,
            rgba(8, 12, 20, 0.65) 45%,
            rgba(8, 12, 20, 0.25) 100%
        );

    content: "";

    z-index: 0;
}


/* Bottom accent */

.banner-section::after {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: var(--primary-color);

    content: "";

    z-index: 2;
}


/* Keep banner content above overlay */

.banner-section > .container,
.banner-section .container {
    position: relative;
    z-index: 2;
}


/*-------------------------
    Banner Content
-----------------------------*/

.banner_content {
    max-width: 650px;

    padding-left: 0;

    color: var(--white);
}

.banner_content h1 {
    max-width: 650px;

    color: var(--white);

    font-size: clamp(40px, 5vw, 64px);
    font-weight: 900;

    line-height: 1.08;

    margin-bottom: 22px;

    text-transform: uppercase;

    letter-spacing: -1px;
}

.banner_content h1 span {
    color: var(--primary-color);
    font-weight: 900;
}

.banner_content p {
    max-width: 570px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 18px;
    font-weight: 400;

    line-height: 1.7;

    margin-bottom: 30px;
}


/*-------------------------
    Car Finder Box
-----------------------------*/

.car-finder-box {
    position: relative;

    background: rgba(255, 255, 255, 0.96);

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 16px;

    padding: 26px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.20);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* Finder heading if present */

.car-finder-box h3,
.car-finder-box h4 {
    color: var(--heading-color);

    margin-bottom: 18px;
}


/*-------------------------
    Find Car Form
-----------------------------*/

.find-car-form {
    overflow: visible;
}

.find-car-form .form-control {
    border: 1px solid var(--border-color);
}

.find-car-form .form-control:focus {
    border-color: var(--primary-color);
}


/* Two-column form fields */

.find-car-form .col-form-6 {
    float: left;

    width: calc(50% - 6px);
}

.find-car-form .col-form-6:nth-child(2n+1) {
    margin-right: 12px;
}


/*-------------------------
    Finder Button
-----------------------------*/

.find-car-form .btn {
    width: 100%;

    min-height: 48px;

    margin-top: 5px;
}


/*-------------------------
    3.2. Filter Form
-------------------------------*/

#filter_form {
    padding: 45px 0;

    background: var(--secondary-color);
}

#filter_form h3 {
    color: var(--white);

    font-size: 28px;

    margin-bottom: 25px;
}

#filter_form .btn {
    min-height: 46px;

    font-size: 16px;
}

#filter_form .btn i {
    margin-right: 6px;
}

#filter_form .form-group {
    margin-bottom: 20px;
}

#filter_form .form-label,
#filter_form .control-label {
    color: rgba(255, 255, 255, 0.85);
}


/*-------------------------
    Price Slider
-----------------------------*/

.slider.slider-horizontal {
    width: 100%;
}

.slider.slider-horizontal .slider-track {
    height: 5px;

    background-color: #374151;
    background-image: none;

    border-radius: 10px;
}

.slider .slider-handle,
.slider .slider-selection {
    background-image: none;
}

.slider .slider-handle {
    width: 18px;
    height: 18px;

    margin-top: -6px;

    border: 3px solid var(--white);
    border-radius: 50%;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);

    cursor: pointer;
}


/*-------------------------
    3.3. About Us Section
-------------------------------*/

.looking-car {
    position: relative;

    width: 450px;
    max-width: 100%;

    padding: 50px 30px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 0 30px 0 30px;

    box-shadow: var(--shadow-sm);

    transition: var(--transition);
}

.looking-car:hover {
    box-shadow: var(--shadow-md);

    transform: translateY(-4px);
}

.looking-car span {
    color: var(--primary-color);

    font-weight: 400;
}


/* Content */

.looking-car-content {
    position: relative;

    width: 60%;

    z-index: 2;
}

.looking-car-content p {
    width: 85%;

    color: var(--text-color);

    font-size: 14px;
    font-weight: 400;

    line-height: 1.7;

    margin-bottom: 26px;
}


/* Car image */

.looking-cat-image {
    position: absolute;

    right: -120px;
    top: 40px;

    max-width: 350px;

    z-index: 1;
}

.looking-cat-image img {
    display: block;

    max-width: 100%;
    height: auto;

    filter: drop-shadow(
        0 15px 20px rgba(0, 0, 0, 0.15)
    );
}


/*-----------------------------
    3.4. Recently Listed Cars
-----------------------------------*/

.recent-tab {
    margin: 0 auto;

    text-align: center;
}


/*-------------------------
    Recent Tabs
-----------------------------*/

.recent-tab ul.nav-tabs {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 50px;

    box-shadow: var(--shadow-sm);

    margin: 0 auto;

    padding: 5px;
}

.recent-tab .nav.nav-tabs a {
    position: relative;

    display: block;

    background: transparent;

    border: none;
    border-radius: 50px;

    color: var(--text-color);

    font-size: 14px;
    font-weight: 800;

    line-height: 26px;

    margin: 0;

    padding: 8px 26px;

    transition: var(--transition);
}

.recent-tab .nav.nav-tabs a:hover {
    color: var(--primary-color);

    background: #fff5f6;
}


/* Active tab */

.recent-tab .nav.nav-tabs li.active a {
    color: var(--white);

    background: var(--primary-color);

    border: none;

    box-shadow:
        0 5px 15px rgba(230, 57, 70, 0.22);
}


/* Remove old triangle */

.recent-tab .nav.nav-tabs li.active::after {
    display: none;
}


/*-------------------------
    Car Grid
-----------------------------*/

.col-list-3 {
    float: left;

    width: 33.333%;

    padding: 0 10px;

    box-sizing: border-box;
}

.col-list-3:nth-child(3n) {
    clear: right;
}

.col-list-3:nth-child(3n+1) {
    clear: left;
}


/*-------------------------
    Recent Car Card
-----------------------------*/

.recent-car-list {
    position: relative;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 14px;

    margin-top: 30px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.recent-car-list:hover {
    border-color: #e5e7eb;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);

    transform: translateY(-7px);
}


/*-------------------------
    Car Image Area
-----------------------------*/

.car-info-box {
    position: relative;

    overflow: hidden;

    background: #f8fafc;
}

.car-info-box img {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform 0.5s ease;
}

.recent-car-list:hover .car-info-box img {
    transform: scale(1.04);
}


/*-------------------------
    Car Specifications Overlay
-----------------------------*/

.car-info-box ul {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    width: 100%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.05)
        );

    margin: 0;

    padding: 28px 15px 12px;

    box-sizing: border-box;
}

.car-info-box li {
    display: inline-flex;
    align-items: center;

    color: var(--white);

    font-size: 12px;
    line-height: 1;

    list-style: none;

    margin: 0 14px 0 0;

    opacity: 0.95;
}

.car-info-box li .fa {
    margin-right: 6px;

    color: rgba(255, 255, 255, 0.9);
}

.car-info-box li:last-child {
    margin-right: 0;
}


/*-------------------------
    Car Title / Price
-----------------------------*/

.car-title-m {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    overflow: hidden;

    padding: 20px 20px 10px;
}

.car-title-m h6 {
    float: none;

    max-width: 245px;

    margin: 0;

    font-size: 17px;
    font-weight: 800;

    line-height: 1.4;
}

.car-title-m h6 a {
    color: var(--heading-color);
}

.car-title-m h6 a:hover {
    color: var(--primary-color);
}


/* Price */

.car-title-m .price {
    float: none;

    color: var(--primary-color);

    font-size: 16px;
    font-weight: 900;

    white-space: nowrap;
}

.car-title-m .price small {
    color: var(--muted-color);

    font-size: 11px;
    font-weight: 400;
}


/*-------------------------
    Vehicle Description
-----------------------------*/

.inventory_info_m {
    padding: 0 20px 20px;
}

.inventory_info_m p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.65;

    margin-bottom: 0;
}


/*-------------------------
    Car Card Buttons
-----------------------------*/

.recent-car-list .btn {
    margin: 0 20px 20px;
}


/*-------------------------
    Blog Share Button
-----------------------------*/

.blog-info-box .share_article {
    position: absolute;

    top: 15px;
    left: 15px;

    z-index: 5;

    overflow: visible;
}


/* Main share button */

.blog-info-box .share_article p {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: rgba(17, 24, 39, 0.72);

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;

    color: var(--white);

    line-height: 1;

    cursor: pointer;

    float: none;

    margin: 0;

    backdrop-filter: blur(8px);

    transition: var(--transition);
}

.blog-info-box .share_article:hover p {
    background: var(--white);

    color: var(--heading-color);

    transform: rotate(10deg);
}


/* Share icons */

.blog-info-box .share_article ul {
    position: absolute;

    top: 42px;
    left: 0;

    display: flex;
    flex-direction: column;

    width: auto;

    padding: 0;
    margin: 0;

    background: transparent;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.blog-info-box .share_article ul li {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin: 0 0 5px;

    background: rgba(17, 24, 39, 0.78);

    border: none;

    border-radius: 50%;

    line-height: 36px;
}

.blog-info-box .share_article ul li a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: var(--white);

    border-radius: 50%;
}

.blog-info-box .share_article ul li a:hover {
    background: var(--primary-color);

    color: var(--white);

    border-radius: 50%;
}


/* Show share menu */

.blog-info-box .share_article:hover ul {
    position: absolute;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/*-------------------------
    Homepage Responsive
-----------------------------*/

@media (max-width: 991px) {

    .banner-section {
        min-height: 620px;

        padding: 80px 0;
    }

    .banner_content {
        max-width: 560px;
    }

    .banner_content h1 {
        font-size: 46px;
    }

    .car-finder-box {
        margin-top: 30px;
    }

    .looking-car {
        width: 100%;
    }

    .looking-cat-image {
        right: -80px;

        max-width: 280px;
    }

    .col-list-3 {
        width: 50%;
    }

    .col-list-3:nth-child(3n),
    .col-list-3:nth-child(3n+1) {
        clear: none;
    }

    .col-list-3:nth-child(2n+1) {
        clear: left;
    }
}


/*-------------------------
    Mobile
-----------------------------*/

@media (max-width: 767px) {

    .banner-section {
        min-height: auto;

        display: block;

        padding: 70px 0 60px;
    }

    .banner-section::before {
        background:
            linear-gradient(
                180deg,
                rgba(8, 12, 20, 0.82),
                rgba(8, 12, 20, 0.70)
            );
    }

    .banner_content {
        max-width: 100%;

        text-align: center;
    }

    .banner_content h1 {
        font-size: 36px;

        line-height: 1.15;

        letter-spacing: -0.5px;
    }

    .banner_content p {
        font-size: 15px;

        line-height: 1.7;

        margin-left: auto;
        margin-right: auto;
    }


    /* Finder */

    .car-finder-box {
        padding: 20px;

        margin-top: 30px;

        border-radius: 12px;
    }

    .find-car-form .col-form-6 {
        float: none;

        width: 100%;

        margin-right: 0 !important;
    }


    /* About */

    .looking-car {
        width: 100%;

        padding: 35px 25px;

        border-radius: 0 20px 0 20px;
    }

    .looking-car-content {
        width: 100%;
    }

    .looking-car-content p {
        width: 100%;
    }

    .looking-cat-image {
        position: relative;

        right: auto;
        top: auto;

        max-width: 100%;

        margin: 25px auto 0;

        text-align: center;
    }


    /* Tabs */

    .recent-tab ul.nav-tabs {
        display: flex;

        width: 100%;

        overflow-x: auto;

        justify-content: flex-start;

        border-radius: 12px;

        scrollbar-width: none;
    }

    .recent-tab ul.nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .recent-tab .nav.nav-tabs a {
        white-space: nowrap;

        padding: 8px 18px;
    }


    /* Car grid */

    .col-list-3 {
        float: none;

        width: 100%;

        padding: 0;
    }

    .col-list-3:nth-child(2n+1),
    .col-list-3:nth-child(3n),
    .col-list-3:nth-child(3n+1) {
        clear: none;
    }

    .recent-car-list {
        margin-top: 20px;
    }

    .car-title-m {
        padding: 17px 17px 8px;
    }

    .inventory_info_m {
        padding: 0 17px 17px;
    }

    .recent-car-list .btn {
        margin: 0 17px 17px;
    }
}



/*---------------------
    3.5. Fun-Facts
-----------------------------*/

.fun-facts-section {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(10, 15, 25, 0.90),
            rgba(10, 15, 25, 0.72)
        ),
        url("../images/fun-facts-bg.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 90px 0;

    overflow: hidden;
}


/* Statistics container */

.fun-facts-m {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 170px;
    height: 170px;

    margin: 0 auto;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;

    color: var(--white);

    text-align: center;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.fun-facts-m:hover {
    background: rgba(230, 57, 70, 0.15);

    border-color: rgba(230, 57, 70, 0.65);

    transform: translateY(-6px);
}


/* Inner content */

.fun-facts-m .cell {
    display: block;

    width: 100%;

    padding: 20px;

    box-sizing: border-box;
}


/* Number */

.fun-facts-m h2 {
    color: var(--white);

    font-size: 34px;
    font-weight: 900;

    line-height: 1.2;

    margin: 0 auto 6px;
}

.fun-facts-m h2 .fa {
    display: block;

    margin-bottom: 8px;

    color: var(--primary-color);

    font-size: 22px;
}


/* Description */

.fun-facts-m p {
    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;

    line-height: 1.5;

    margin: 0 auto;
}


/*----------------------
    3.6. Featured Cars
-------------------------------*/

.featured-car-list {
    position: relative;

    background: var(--white);

    border: 1px solid var(--border-color);
    border-radius: 14px;

    margin: 0 auto 20px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.featured-car-list:hover {
    border-color: #e5e7eb;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.12);

    transform: translateY(-7px);
}


/*-------------------------
    Featured Image
-----------------------------*/

.featured-car-img {
    position: relative;

    overflow: hidden;

    background: #f8fafc;
}

.featured-car-img img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.5s ease;
}

.featured-car-list:hover .featured-car-img img {
    transform: scale(1.04);
}


/*-------------------------
    Featured Badge
-----------------------------*/

.featured-icon {
    position: absolute;

    top: 14px;
    right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;
    height: 30px;

    padding: 0 12px;

    background: var(--primary-color);

    border-radius: 50px;

    color: var(--white);

    font-size: 11px;
    font-weight: 800;

    line-height: 30px;

    text-align: center;

    text-transform: capitalize;

    transform: none;

    box-shadow:
        0 5px 15px rgba(230, 57, 70, 0.25);
}


/*-------------------------
    Featured Content
-----------------------------*/

.featured-car-content {
    padding: 20px;

    overflow: hidden;
}

.featured-car-content > h6 {
    margin-bottom: 7px;

    font-size: 18px;
    font-weight: 800;
}

.featured-car-content a {
    color: var(--heading-color);
}

.featured-car-content a:hover {
    color: var(--primary-color);
}


/* Price */

.featured-price {
    color: var(--primary-color);

    font-size: 18px;
    font-weight: 900;
}

.featured-price small {
    color: var(--muted-color);

    font-size: 11px;
    font-weight: 400;
}


/*-------------------------
    Featured Specifications
-----------------------------*/

.featured-car-content ul {
    border-top: 1px solid var(--border-color);

    margin: 16px auto 0;

    padding: 16px 0 0;

    overflow: hidden;
}

.featured-car-content li {
    float: left;

    width: 50%;

    color: var(--text-color);

    font-size: 13px;

    list-style: none;

    margin-bottom: 10px;
}

.featured-car-content li .fa {
    width: 18px;

    margin-right: 7px;

    color: var(--primary-color);

    font-size: 14px;
}


/*-------------------------
    Featured Price / Location
-----------------------------*/

.price_info {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 15px;

    overflow: hidden;
}

.price_info .featured-price {
    float: none;

    width: auto;
}

.price_info .car-location {
    float: none;

    width: auto;

    margin: 0;

    color: var(--muted-color);

    text-align: right;
}

.price_info .car-location > span {
    display: block;

    color: var(--muted-color);

    font-size: 12px;

    line-height: 22px;
}

.price_info .car-location .fa {
    color: var(--primary-color);

    margin-right: 4px;
}


/*-------------------------
    Compare
-----------------------------*/

.compare_item {
    position: absolute;

    left: 12px;
    top: 12px;

    padding: 5px 10px;

    background: rgba(17, 24, 39, 0.80);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;

    backdrop-filter: blur(6px);
}

.compare_item .checkbox {
    margin: 0;

    padding: 0;
}

.compare_item .checkbox label {
    color: var(--white);

    font-size: 12px;
    font-weight: 600;

    padding-left: 23px;
}

.compare_item .checkbox label::before {
    width: 13px;
    height: 13px;

    top: 4px;

    background: var(--white);

    border: none;

    border-radius: 3px;
}

.compare_item .checkbox input[type="checkbox"]:checked + label::before {
    background: var(--primary-color);

    color: var(--white);

    content: "\f00c";

    font-family: "FontAwesome";
    font-size: 9px;

    line-height: 13px;

    text-align: center;
}


/*---------------------
    3.7. Trending Cars
-----------------------------*/

.trending-car-m {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #111827;
}

.trending-car-m img {
    display: block;

    width: 100%;

    transition: transform 0.5s ease;
}

.trending-car-m:hover img {
    transform: scale(1.05);
}


/* Trending hover overlay */

.trending-hover {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    padding: 30px;

    background:
        linear-gradient(
            to top,
            rgba(8, 12, 20, 0.92),
            rgba(8, 12, 20, 0.30)
        );

    text-align: center;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;

    z-index: 111;
}

.trending-car-m:hover .trending-hover {
    top: 0;

    opacity: 1;

    transform: translateY(0);
}


/* Trending title */

.trending-hover h4 {
    position: relative;

    top: auto;
    left: auto;
    right: auto;

    margin: 0;

    transform: none;
}

.trending-hover h4 a {
    color: var(--white);

    font-size: 22px;
    font-weight: 800;
}

.trending-hover h4 a:hover {
    color: var(--primary-color);
}


/*-------------------------
    Carousel Pagination
-----------------------------*/

.owl-pagination {
    display: block;

    width: 100%;

    margin: auto;

    padding-top: 10px;

    text-align: center;
}

.owl-pagination .owl-page {
    display: inline-block;

    width: 8px;
    height: 8px;

    margin: 25px 4px 0;

    background: #cbd5e1;

    border-radius: 50%;

    cursor: pointer;

    transition:
        width 0.25s ease,
        background-color 0.25s ease;
}

.owl-pagination .owl-page.active {
    position: relative;

    top: 0;

    width: 25px;
    height: 8px;

    background: var(--primary-color);

    border-radius: 20px;
}


/*--------------------
    3.8 Testimonial Section
-----------------------------*/

.testimonial-section {
    position: relative;

    background-image:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.90),
            rgba(8, 12, 20, 0.72)
        ),
        url("../images/testimonial-bg.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.white-text h2 {
    color: var(--white);
}


/*-------------------------
    Testimonial
-----------------------------*/

.testimonial-m {
    position: relative;

    padding: 20px;

    z-index: 1;
}


/*-------------------------
    Client Image
-----------------------------*/

.testimonial-img {
    position: absolute;

    left: 20px;
    top: 40px;

    width: 150px;
    height: 150px;

    overflow: hidden;

    border: 5px solid var(--white);
    border-radius: 50%;

    background: #f3f4f6;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18);

    z-index: 2;
}

.testimonial-img > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*-------------------------
    Testimonial Content
-----------------------------*/

.testimonial-content {
    position: relative;

    float: right;

    width: 425px;

    padding: 35px 35px 35px 100px;

    background: var(--white);

    border-radius: 0 30px 0 30px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.12);

    overflow: hidden;
}


/* Background decoration */

.testimonial-content::after {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        url("../images/testimonial-content-bg.jpg")
        center center / cover no-repeat;

    border-radius: inherit;

    content: "";

    opacity: 0.08;

    pointer-events: none;
}


/* Keep content above background decoration */

.testimonial-content > * {
    position: relative;

    z-index: 1;
}


/*-------------------------
    Client Designation
-----------------------------*/

.client-designation {
    color: var(--muted-color);

    font-size: 13px;
    font-weight: 600;
}


/*-------------------------
    Testimonial Heading
-----------------------------*/

.testimonial-heading {
    position: relative;

    margin-bottom: 25px;

    padding-left: 70px;
}

.testimonial-heading h5 {
    color: var(--heading-color);

    font-size: 18px;
    font-weight: 800;

    margin: 0;
}


/* Quote icon */

.testimonial-heading::after {
    position: absolute;

    left: 0;
    top: 10px;

    color: var(--primary-color);

    content: "\f10d";

    font-family: "FontAwesome";

    font-size: 42px;

    line-height: 1;

    opacity: 0.18;
}


/*-------------------------
    Testimonial Text
-----------------------------*/

.testimonial-content > p {
    color: var(--text-color);

    font-size: 14px;

    line-height: 1.8;

    margin: 0 0 8px;

    padding-left: 0;
}


/* Testimonial carousel pagination */

#testimonial-slider .owl-pagination .owl-page {
    background: rgba(255, 255, 255, 0.45);
}

#testimonial-slider .owl-pagination .owl-page.active {
    background: var(--primary-color);
}


/*-------------------------
    Homepage Section Responsive
-----------------------------*/

@media (max-width: 991px) {

    .fun-facts-section {
        padding: 70px 0;
    }

    .fun-facts-m {
        width: 150px;
        height: 150px;
    }

    .fun-facts-m h2 {
        font-size: 28px;
    }

    .featured-car-content {
        padding: 17px;
    }

    .testimonial-content {
        width: 70%;

        padding-left: 85px;
    }

    .testimonial-img {
        width: 130px;
        height: 130px;

        top: 50px;
    }
}


/*-------------------------
    Mobile
-----------------------------*/

@media (max-width: 767px) {

    .fun-facts-section {
        padding: 60px 0;
    }

    .fun-facts-m {
        width: 140px;
        height: 140px;

        margin-bottom: 25px;
    }

    .fun-facts-m h2 {
        font-size: 26px;
    }

    .fun-facts-m p {
        font-size: 12px;
    }


    /* Featured cars */

    .featured-car-list {
        margin-bottom: 20px;
    }

    .featured-car-content {
        padding: 17px;
    }

    .featured-car-content li {
        font-size: 12px;
    }


    /* Trending */

    .trending-hover {
        opacity: 1;

        transform: translateY(0);

        background:
            linear-gradient(
                to top,
                rgba(8, 12, 20, 0.82),
                rgba(8, 12, 20, 0.05)
            );
    }


    /* Testimonials */

    .testimonial-m {
        padding: 10px;
    }

    .testimonial-img {
        position: relative;

        left: auto;
        top: auto;

        width: 100px;
        height: 100px;

        margin: 0 auto -25px;

        z-index: 3;
    }

    .testimonial-content {
        float: none;

        width: 100%;

        padding: 55px 25px 25px;

        border-radius: 12px;

        text-align: center;
    }

    .testimonial-heading {
        padding-left: 0;

        margin-bottom: 18px;
    }

    .testimonial-heading::after {
        display: none;
    }

    .testimonial-content > p {
        font-size: 14px;
    }
}



/*----------------------
    3.9. Blog Section
-----------------------------*/

.blog-info-box {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #f8fafc;
}

.blog-info-box img {
    display: block;

    width: 100%;
    height: auto;

    transition: transform 0.5s ease;
}

.blog-info-box:hover img {
    transform: scale(1.04);
}


/* Blog Meta */

.blog-info-box ul {
    position: absolute;

    left: 0;
    bottom: 0;

    display: flex;
    align-items: center;

    width: 100%;

    background:
        linear-gradient(
            to top,
            rgba(8, 12, 20, 0.78),
            rgba(8, 12, 20, 0.08)
        );

    margin: 0;

    padding: 30px 15px 12px;

    box-sizing: border-box;
}

.blog-info-box li {
    display: inline-flex;
    align-items: center;

    color: var(--white);

    font-size: 12px;

    line-height: 1;

    list-style: none;

    margin: 0 15px 0 0;
}

.blog-info-box li a {
    color: var(--white);
}

.blog-info-box li a:hover {
    color: var(--primary-color);
}

.blog-info-box li .fa {
    margin-right: 5px;

    color: var(--primary-color);
}


/* Blog Content */

.blog-content {
    overflow: hidden;

    padding-top: 20px;
}

.blog-content h5 {
    color: var(--heading-color);

    font-size: 19px;

    line-height: 1.45;

    margin-bottom: 10px;
}

.blog-content h5 a {
    color: var(--heading-color);
}

.blog-content h5 a:hover {
    color: var(--primary-color);
}

.blog-content p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;
}


/* Read More */

.blog-content a {
    color: var(--primary-color);

    font-size: 13px;
    font-weight: 800;
}

.blog-content a i {
    margin-left: 4px;

    transition:
        transform 0.3s ease;
}

.blog-content a:hover i {
    margin-left: 8px;

    transform: translateX(2px);
}


/*------------------------
    3.10. Popular Brands
--------------------------------*/

.brand-section {
    padding: 55px 0;

    background: var(--white);

    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}


/* Brand heading */

.brand-hadding {
    position: relative;

    float: left;

    width: 100px;

    padding-right: 20px;

    border-right: 1px solid var(--border-color);
}

.brand-hadding::after {
    position: absolute;

    right: -9px;
    top: 50%;

    width: 16px;
    height: 16px;

    background: var(--white);

    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);

    content: "";

    transform:
        translateY(-50%)
        rotate(45deg);
}

.brand-hadding h5 {
    color: var(--heading-color);

    font-size: 16px;

    line-height: 1.5;

    margin: 10px 0;
}


/* Brand Carousel */

#popular_brands div {
    padding: 0 10px;
}

.brand-logo-list {
    float: right;

    width: calc(100% - 120px);

    margin: 0;

    padding: 0 0 0 30px;
}

.brand-logo-list a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 65px;

    padding: 10px;

    border-radius: 8px;

    transition: var(--transition);
}

.brand-logo-list a:hover {
    background: #f8fafc;
}

.brand-logo-list a img {
    display: block;

    max-width: 100%;
    max-height: 45px;

    margin: 0 auto;

    opacity: 0.65;

    filter: grayscale(100%);

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease;
}

.brand-logo-list a:hover img {
    opacity: 1;

    filter: grayscale(0);

    transform: scale(1.05);
}

.brand-logo-list .owl-controls.clickable {
    display: none !important;
}


/*-------------------------------
    3.11. Login / Register /
    Forgot Password
-----------------------------------------*/

.login_wrap,
.signup_wrap {
    position: relative;

    display: table;

    width: 100%;
}


/* Modal Footer */

#loginform .modal-footer,
#signupform .modal-footer,
#forgotpassword .modal-footer {
    text-align: center;

    border-top: none;

    padding-top: 15px;
}

#loginform .modal-footer p,
#signupform .modal-footer p,
#forgotpassword .modal-footer p {
    color: var(--text-color);

    font-size: 13px;

    font-weight: 400;

    line-height: 22px;

    margin: 0;
}

#loginform .modal-footer p a,
#signupform .modal-footer p a,
#forgotpassword .modal-footer p a {
    color: var(--primary-color);

    font-weight: 700;
}


/* Divider */

.mid_divider {
    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: 100%;

    background: var(--border-color);
}


/*-------------------------
    Social Login Buttons
-----------------------------*/

.btn.facebook-btn,
.btn.facebook-btn:hover {
    background: #3c5a98;

    border-color: #3c5a98;
}

.btn.twitter-btn,
.btn.twitter-btn:hover {
    background: #28bcec;

    border-color: #28bcec;
}

.btn.googleplus-btn,
.btn.googleplus-btn:hover {
    background: #db4437;

    border-color: #db4437;
}

.btn.facebook-btn,
.btn.twitter-btn,
.btn.googleplus-btn {
    justify-content: flex-start;

    width: 100%;

    min-height: 46px;

    margin-bottom: 10px;

    padding: 9px 18px;

    font-size: 14px;
    font-weight: 700;

    text-align: left;

    box-shadow: none;
}

.btn.facebook-btn:hover,
.btn.twitter-btn:hover,
.btn.googleplus-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.12);
}

.btn.facebook-btn i,
.btn.twitter-btn i,
.btn.googleplus-btn i {
    width: 25px;

    margin-right: 10px;

    font-size: 20px;

    text-align: center;
}


/*-------------------------
    Gray Text
-----------------------------*/

.gray_text {
    color: #9ca3af;
}


/*-------------------------
    Forgot Password
-----------------------------*/

.forgotpassword_wrap p {
    max-width: 80%;

    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;

    margin: 0 auto 15px;
}


/*-----------------
    3.12. Footer
------------------------*/

.footer-top {
    position: relative;

    background:
        linear-gradient(
            135deg,
            #111827,
            #0b1120
        );

    color: #9ca3af;

    padding: 75px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* Footer headings */

.footer-top h6 {
    color: var(--white);

    font-size: 14px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.6px;

    margin-bottom: 25px;
}


/* Footer lists */

.footer-top ul {
    overflow: hidden;

    padding: 0;

    margin: 0;
}

.footer-top ul li {
    position: relative;

    list-style: none;

    margin-bottom: 13px;

    padding-left: 18px;

    font-size: 14px;

    line-height: 1.6;
}


/* Arrow */

.footer-top ul li a::after {
    position: absolute;

    left: 0;

    content: "\f105";

    font-family: "FontAwesome";

    color: var(--primary-color);

    transition:
        transform 0.25s ease;
}

.footer-top ul li a:hover::after {
    transform: translateX(3px);
}


/* Footer links */

.footer-top ul li a {
    color: #cbd5e1;

    transition:
        color 0.25s ease;
}

.footer-top ul li a:hover {
    color: var(--white);
}


/*-------------------------
    Newsletter
-----------------------------*/

input.newsletter-input {
    width: 100%;

    height: 46px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 8px;

    color: var(--white);

    font-size: 13px;

    padding: 0 15px;

    transition: var(--transition);
}

input.newsletter-input::placeholder {
    color: #9ca3af;
}

input.newsletter-input:focus {
    background: rgba(255, 255, 255, 0.08);

    border-color: var(--primary-color);

    outline: none;

    box-shadow:
        0 0 0 3px rgba(230, 57, 70, 0.12);
}


/* Newsletter button */

.footer-top .btn {
    margin-top: 10px;
}


/* Subscribed message */

.subscribed-text {
    color: #6b7280;

    font-size: 12px;

    line-height: 18px;

    padding-top: 10px;
}


/*-------------------------
    Footer Bottom
-----------------------------*/

.footer-bottom {
    background: #080d18;

    padding: 20px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* Social widget */

.footer_widget {
    display: inline-block;

    color: var(--white);

    margin: 4px 0 0 30px;
}

.footer_widget p {
    display: inline-block;

    color: #9ca3af;

    vertical-align: middle;

    margin: 0;
}

.footer_widget ul {
    display: inline-flex;
    align-items: center;

    padding: 0;

    vertical-align: middle;

    margin: 0 0 0 8px;
}

.footer_widget ul li {
    display: inline-block;

    vertical-align: middle;

    list-style: none;

    margin: 0 2px;
}

.footer_widget ul li a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    color: #cbd5e1;

    font-size: 15px;

    border-radius: 50%;

    transition: var(--transition);
}

.footer_widget ul li a:hover {
    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);
}

.footer_widget ul li a i {
    margin: 0;
}


/*-------------------------
    Copyright
-----------------------------*/

.copy-right {
    color: #9ca3af;

    font-size: 13px;

    line-height: 40px;

    margin: 0 auto;
}


/*-------------------------
    Back To Top
-----------------------------*/

.back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 100;
}

.back-top a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: var(--primary-color);

    border-radius: 50%;

    color: var(--white);

    font-size: 16px;

    box-shadow:
        0 8px 22px rgba(230, 57, 70, 0.25);

    transition: var(--transition);
}

.back-top a:hover,
.back-top a:focus {
    background: var(--primary-hover);

    color: var(--white);

    transform: translateY(-4px);

    box-shadow:
        0 12px 28px rgba(230, 57, 70, 0.30);
}


/*-------------------------
    Responsive
-----------------------------*/

@media (max-width: 991px) {

    .brand-hadding {
        width: 80px;
    }

    .brand-logo-list {
        width: calc(100% - 100px);

        padding-left: 25px;
    }

    .footer-top {
        padding: 60px 0;
    }
}


@media (max-width: 767px) {

    /* Blog */

    .blog-content {
        padding-top: 16px;
    }

    .blog-content h5 {
        font-size: 17px;
    }


    /* Brands */

    .brand-section {
        padding: 40px 0;
    }

    .brand-hadding {
        float: none;

        width: 100%;

        padding: 0 0 15px;

        border-right: none;
        border-bottom: 1px solid var(--border-color);

        text-align: center;
    }

    .brand-hadding::after {
        right: auto;
        left: 50%;

        top: auto;
        bottom: -9px;

        transform:
            translateX(-50%)
            rotate(45deg);
    }

    .brand-hadding h5 {
        margin: 0;
    }

    .brand-logo-list {
        float: none;

        width: 100%;

        padding: 20px 0 0;
    }


    /* Authentication */

    .mid_divider {
        position: relative;

        left: auto;

        width: 100%;
        height: 1px;

        margin: 20px 0;

        background: var(--border-color);
    }


    /* Footer */

    .footer-top {
        padding: 55px 0 35px;
    }

    .footer-top h6 {
        margin-bottom: 18px;
    }

    .footer-bottom {
        padding: 18px 0;

        text-align: center;
    }

    .copy-right {
        line-height: 25px;

        margin-bottom: 10px;
    }

    .footer_widget {
        display: block;

        margin: 0;
    }


    /* Back to top */

    .back-top {
        right: 15px;
        bottom: 15px;
    }

    .back-top a {
        width: 38px;
        height: 38px;

        font-size: 14px;
    }
}




/*=======================
     4. Home-Page-2
================================*/


/*-----------------
    4.1. Header
------------------------*/

.header_style2 {
    position: relative;

    background: rgba(255, 255, 255, 0.97);

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        padding 0.3s ease;

    z-index: 1000;
}

.header_style2 #navigation_bar {
    background: transparent;

    text-align: center;
}

.header_style2 .navbar-default .navbar-nav > li {
    margin: 0;
}

.header_style2 .navbar-default .navbar-nav > li > a {
    position: relative;

    color: var(--heading-color);

    padding: 24px 18px;
}

.header_style2 .navbar-default .navbar-nav > li > a::before {
    left: 18px;
    right: 18px;
    bottom: 8px;
}

.header_style2 .navbar-default .navbar-nav > li:hover > a,
.header_style2 .navbar-default .navbar-nav > li.active > a {
    color: var(--primary-color);
}

.header_style2 .user_login {
    margin: 22px 10px 15px 0;

    border-color: var(--border-color);
}

.header_style2 .user_login i {
    color: var(--heading-color);

    font-size: 20px;
}

.header_style2 .logo {
    margin: 15px 0;
}

.header_style2 .login_btn {
    margin: 21px 0;
}

.header_style2 .navbar-default .navbar-nav > li.dropdown > a::after {
    right: 0;
    top: 50%;

    transform: translateY(-50%);
}

.header_style2 .navbar-default .navbar-nav > li.dropdown:hover > a::after {
    transform:
        translateY(-50%)
        rotate(180deg);
}

.header_style2 .navbar-nav > li,
.header_style2 .navbar-nav {
    display: inline-block;

    float: none;
}

@media (min-width: 992px) {

    .header_style2 #navigation.collapse.navbar-collapse {
        display: inline-block !important;

        float: none;

        width: auto !important;
    }

    .header_style2 {
        padding: 5px 0;
    }

}

.header_style2.nav-stacked.affix {
    padding: 0;
}


/*--------------------
    4.2. Banner
---------------------------*/

#banner2 {
    position: relative;

    overflow: hidden;
}

#banner2 h3 {
    color: var(--white);

    font-size: clamp(26px, 3vw, 34px);

    font-weight: 400;

    line-height: 1.3;

    margin: 0 auto 25px;
}

.bannre-item {
    position: relative;

    min-height: 650px;

    padding: 150px 0 250px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Banner content */

.banner_text {
    position: relative;

    max-width: 800px;

    margin: 0 auto;

    z-index: 2;
}

.banner_text h1 {
    color: var(--white);

    font-size: clamp(42px, 6vw, 68px);

    font-weight: 900;

    line-height: 1.05;

    margin-bottom: 20px;

    text-transform: uppercase;

    letter-spacing: -1px;
}

.banner_text p {
    max-width: 650px;

    margin: 0 auto 25px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 17px;

    line-height: 1.7;
}


/* Hero overlay */

#banner2 .item::after {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            180deg,
            rgba(8, 12, 20, 0.50),
            rgba(8, 12, 20, 0.82)
        );

    content: "";

    z-index: 0;
}


/* Carousel caption */

#banner2 .carousel-caption {
    position: absolute;

    left: 15%;
    right: 15%;

    top: 50%;
    bottom: auto;

    padding-bottom: 0;

    transform: translateY(-50%);

    z-index: 2;
}

#banner2 .carousel-control {
    width: 8%;

    opacity: 0.75;

    transition: var(--transition);
}

#banner2 .carousel-control:hover {
    opacity: 1;
}


/* Carousel arrows */

.carousel-control .icon-next,
.carousel-control .icon-prev {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    line-height: 40px;

    transition: var(--transition);
}

.carousel-control:hover .icon-next,
.carousel-control:hover .icon-prev {
    background: var(--primary-color);

    border-color: var(--primary-color);
}


/*--------------------
    4.3. Filter Form
---------------------------*/

#filter_form2 {
    position: relative;

    margin: -105px 0 -20px;

    z-index: 10;
}

.main_bg {
    position: relative;

    padding: 30px;

    background:
        linear-gradient(
            135deg,
            #111827,
            #1f2937
        );

    border-radius: 14px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.20);
}


/* Search button */

.main_bg .btn {
    background: var(--primary-color);

    border-color: var(--primary-color);
}

.main_bg .btn:hover {
    background: var(--primary-hover);

    border-color: var(--primary-hover);
}


/* Labels */

#filter_form2 .form-label {
    display: block;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 7px;
}


/* Inputs */

#filter_form2 .form-control {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    color: var(--white);
}

#filter_form2 .form-control::placeholder {
    color: rgba(255, 255, 255, 0.50);
}

#filter_form2 .form-control:focus {
    background: rgba(255, 255, 255, 0.11);

    border-color: var(--primary-color);
}


/* Slider */

form .slider.slider-horizontal {
    width: 100%;
}

#filter_form2 .slider.slider-horizontal .slider-track {
    background-image: none;

    background-color: rgba(255, 255, 255, 0.20);

    border-radius: 10px;
}

#filter_form2 .slider-handle {
    background-color: var(--white);

    background-image: none;

    border: 3px solid var(--primary-color);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
}

#filter_form2 .slider-selection {
    background-color: var(--primary-color);

    background-image: none;
}


/*-----------------
    4.4. About Us
------------------------*/

.about_info {
    position: relative;

    height: 100%;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    padding: 35px 25px;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.about_info:hover {
    border-color: #e5e7eb;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);

    transform: translateY(-6px);
}


/* Icon */

.about_info .icon_box {
    float: none;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    background: #fff1f2;

    border: none;

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 28px;

    line-height: 1;

    transition: var(--transition);
}

.about_info:hover .icon_box {
    background: var(--primary-color);

    color: var(--white);

    transform: scale(1.05);
}

.about_info h5 {
    color: var(--heading-color);

    font-size: 18px;

    margin: 0 auto 10px;
}

.about_info p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;
}


/*-----------------
    4.5. Fun Facts
------------------------*/

#fun-facts {
    position: relative;

    overflow: hidden;
}

.vc_row {
    box-sizing: border-box;

    display: flex;

    flex-wrap: wrap;
}

.vc_col {
    display: flex;
}


/* Facts container */

.fact_m {
    display: block;

    width: auto;

    margin: 0 30px 0 16%;
}

.fact_m ul {
    clear: both;

    margin: 0;

    padding: 30px 0 0;
}

.fact_m ul li p {
    margin: 0;

    color: rgba(255, 255, 255, 0.70);
}

.fact_m ul li h2 {
    color: var(--white);

    font-size: 30px;

    margin: 0 0 3px;
}


/* Individual fact */

.fact_m ul li {
    position: relative;

    float: left;

    width: calc(50% - 8px);

    margin: 0 16px 16px 0;

    padding: 25px 20px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 10px;

    list-style: none;

    transition: var(--transition);
}

.fact_m ul li:nth-child(2n) {
    margin-right: 0;
}

.fact_m ul li:hover {
    background: rgba(230, 57, 70, 0.10);

    border-color: rgba(230, 57, 70, 0.45);

    transform: translateY(-4px);
}


/* Fact icon */

.fact_m ul li i {
    float: left;

    margin: 0 15px 15px 0;

    color: var(--primary-color);

    font-size: 42px;
}


/* Facts background */

.facts_section_bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.90),
            rgba(8, 12, 20, 0.65)
        ),
        url("../images/facts_bg.jpg")
        center center / cover no-repeat;
}


/*-----------------
    4.6. Our Services
------------------------*/

.services_info {
    overflow: hidden;

    margin: 25px auto 0;
}

.our_services {
    display: block;

    width: auto;

    margin: 0 16% 0 40px;
}

.services_info h4 {
    color: var(--white);

    font-size: 18px;

    margin: 8px auto 7px;
}

.services_info h4 a {
    color: var(--white);
}

.services_info h4 a:hover {
    color: var(--primary-color);
}

.services_info p {
    color: rgba(255, 255, 255, 0.70);

    font-size: 14px;

    line-height: 1.65;
}


/* Service icon */

.icon_box {
    display: flex;
    align-items: center;
    justify-content: center;

    float: left;

    width: 78px;
    height: 78px;

    margin: 0 22px 20px 0;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 30px;

    line-height: 1;

    transition: var(--transition);
}

.services_info:hover .icon_box {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-3px);
}


/*-----------------
    4.7. Testimonial
------------------------*/

#testimonial {
    position: relative;

    overflow: hidden;
}

.testimonial_wrap {
    position: relative;

    height: 100%;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    margin: 15px;

    padding: 35px 30px;

    text-align: center;

    overflow: visible;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.testimonial_wrap:hover {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);

    transform: translateY(-6px);
}


/* Testimonial image */

.testimonial_wrap .testimonial-img {
    float: none;

    position: relative;

    left: auto;
    right: auto;
    top: auto;

    width: 105px;
    height: 105px;

    margin: 0 auto 20px;

    border: 4px solid var(--white);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);
}

.testimonial_wrap .testimonial-heading::after {
    display: none;
}


/* Quote decoration */

.testimonial_wrap::after {
    position: absolute;

    left: 25px;
    top: 35px;

    color: var(--primary-color);

    content: "\f10d";

    font-family: "FontAwesome";

    font-size: 55px;

    line-height: 1;

    opacity: 0.08;
}


/* Heading */

.testimonial_wrap .testimonial-heading {
    margin: 0 auto 18px;

    padding: 0;
}

.testimonial_wrap .testimonial-heading h5 {
    color: var(--heading-color);

    font-size: 17px;

    margin-bottom: 5px;
}

.testimonial_wrap .client-designation {
    color: var(--muted-color);

    font-size: 12px;
}

.testimonial_wrap > p {
    position: relative;

    color: var(--text-color);

    font-size: 14px;

    line-height: 1.75;

    z-index: 2;
}


/*-------------------------
    Home 2 Responsive
-----------------------------*/

@media (max-width: 991px) {

    .bannre-item {
        min-height: 580px;

        padding: 120px 0 210px;
    }

    #banner2 .carousel-caption {
        left: 10%;
        right: 10%;
    }

    #filter_form2 {
        margin: -80px 0 -15px;
    }

    .fact_m {
        margin-left: 5%;
        margin-right: 5%;
    }

    .our_services {
        margin-right: 5%;
    }
}


@media (max-width: 767px) {

    /* Header */

    .header_style2 {
        padding: 0;
    }

    .header_style2 .logo {
        margin: 10px 0;
    }

    .header_style2 .login_btn {
        margin: 12px 0;
    }

    .header_style2 .user_login {
        margin: 12px 8px 10px 0;
    }


    /* Banner */

    .bannre-item {
        min-height: 560px;

        padding: 100px 0 180px;
    }

    #banner2 .carousel-caption {
        left: 20px;
        right: 20px;

        width: auto;
    }

    .banner_text h1 {
        font-size: 38px;

        line-height: 1.12;
    }

    #banner2 h3 {
        font-size: 23px;
    }

    .banner_text p {
        font-size: 15px;
    }

    #banner2 .carousel-control {
        width: 12%;
    }

    .carousel-control .icon-next,
    .carousel-control .icon-prev {
        width: 34px;
        height: 34px;

        line-height: 32px;
    }


    /* Filter */

    #filter_form2 {
        margin: -70px 12px -10px;
    }

    .main_bg {
        padding: 22px;

        border-radius: 12px;
    }


    /* About */

    .about_info {
        margin-bottom: 20px;
    }


    /* Facts */

    .fact_m {
        width: 100%;

        margin: 0;
    }

    .fact_m ul {
        padding-top: 20px;
    }

    .fact_m ul li {
        float: none;

        width: 100%;

        margin: 0 0 12px;
    }

    .fact_m ul li:nth-child(2n) {
        margin-right: 0;
    }


    /* Services */

    .our_services {
        width: auto;

        margin: 0;
    }

    .services_info {
        margin-top: 20px;
    }

    .icon_box {
        width: 65px;
        height: 65px;

        margin-right: 16px;

        font-size: 25px;
    }


    /* Testimonials */

    .testimonial_wrap {
        margin: 10px 0;

        padding: 30px 22px;
    }

    .testimonial_wrap .testimonial-img {
        width: 90px;
        height: 90px;
    }

    .testimonial_wrap::after {
        left: 18px;
        top: 25px;

        font-size: 45px;
    }

}


/*-----------------
    4.8. Help
------------------------*/

#help {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.88),
            rgba(8, 12, 20, 0.62)
        ),
        url("../images/help_bg.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-attachment: fixed;

    overflow: hidden;
}

#help .container {
    position: relative;
    z-index: 2;
}


/*========================================
     5. Inner Page Heading Section
==============================================*/

.page-header {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.88),
            rgba(8, 12, 20, 0.60)
        ),
        url("../images/listing-page-header-img.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border: none;

    margin: 0;

    padding: 0;

    overflow: hidden;
}


/* Decorative bottom accent */

.page-header::after {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 4px;

    background: var(--primary-color);

    content: "";
}


/* Header content */

.page-header_wrap {
    position: relative;

    padding: 85px 0;

    text-align: center;

    z-index: 2;
}

.page-heading {
    position: relative;

    z-index: 1;
}

.page-heading h2,
.page-heading h1 {
    color: var(--white);

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 900;

    line-height: 1.15;

    margin: 0 auto 10px;

    text-transform: uppercase;

    letter-spacing: -0.5px;
}


/*=======================================
    6. Breadcrumb
==========================================*/

.coustom-breadcrumb {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    margin: 0 auto;

    padding: 0;

    z-index: 1;
}

.coustom-breadcrumb li {
    position: relative;

    display: inline-flex;
    align-items: center;

    color: rgba(255, 255, 255, 0.72);

    font-size: 13px;

    line-height: 30px;

    list-style: none;

    margin: 0;

    padding: 0 12px;
}

.coustom-breadcrumb li:first-child {
    padding-left: 0;
}

.coustom-breadcrumb li:last-child {
    padding-right: 0;
}

.coustom-breadcrumb a {
    color: rgba(255, 255, 255, 0.80);

    transition: var(--transition);
}

.coustom-breadcrumb a:hover {
    color: var(--white);

    text-decoration: none;
}


/* Breadcrumb separator */

.coustom-breadcrumb a::after {
    position: absolute;

    right: -4px;

    color: rgba(255, 255, 255, 0.45);

    content: "\f105";

    font-family: "FontAwesome";

    font-size: 11px;
}


/*========================================
    7. Listing Page
=============================================*/

.listing-page {
    overflow: hidden;

    padding: 75px 0;

    background: #f8fafc;
}


/*-------------------------
    Result Sorting
-----------------------------*/

.result-sorting-wrapper {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-left: 4px solid var(--primary-color);

    border-radius: 10px;

    margin-bottom: 30px;

    padding: 14px 18px;

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


/* Result count */

.sorting-count {
    float: none;
}

.sorting-count p {
    color: var(--heading-color);

    font-size: 14px;

    margin: 0;
}

.sorting-count span {
    color: var(--muted-color);
}


/* Sorting */

.result-sorting-by {
    display: flex;

    align-items: center;

    float: none;

    gap: 8px;
}

.result-sorting-by p {
    display: inline-block;

    color: var(--heading-color);

    font-size: 13px;

    margin: 0;
}

.result-sorting-by form {
    display: inline-block;
}

.sorting-select {
    margin: 0;

    padding-left: 5px;
}

.sorting-select .form-control {
    min-width: 145px;

    height: 38px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 8px;

    color: var(--text-color);

    font-size: 12px;

    padding: 0 30px 0 12px;

    cursor: pointer;
}

.sorting-select .form-control:focus {
    border-color: var(--primary-color);
}

.sorting-select.select::after {
    right: 12px;

    padding: 8px 0;

    color: var(--muted-color);

    font-size: 11px;
}

.sorting-select .form-control option {
    padding: 5px;
}


/*-------------------------
    Vehicle Listing
-----------------------------*/

.product-listing-m {
    position: relative;

    display: flex;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    margin: 0 auto 25px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.product-listing-m:hover {
    border-color: #e5e7eb;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);

    transform: translateY(-4px);
}


/* Listing image */

.product-listing-img {
    position: relative;

    float: none;

    width: 45%;

    overflow: hidden;

    background: #f1f5f9;
}

.product-listing-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.product-listing-m:hover .product-listing-img img {
    transform: scale(1.04);
}


/* Listing content */

.product-listing-content {
    float: none;

    width: 55%;

    padding: 25px 25px 22px;
}

.product-listing-content h5 {
    color: var(--heading-color);

    font-size: 20px;

    line-height: 1.35;

    margin-bottom: 5px;
}

.product-listing-content h5 a {
    color: var(--heading-color);
}

.product-listing-content h5 a:hover {
    color: var(--primary-color);
}


/* Vehicle specifications */

.product-listing-content ul {
    margin: 15px auto 18px;

    padding: 0;

    overflow: hidden;
}

.product-listing-content li {
    float: left;

    width: 33.333%;

    color: var(--muted-color);

    font-size: 12px;

    font-weight: 500;

    list-style: none;

    margin: 0 0 10px;
}

.product-listing-content li .fa {
    margin-right: 6px;

    color: var(--primary-color);

    font-size: 14px;
}


/* Vehicle location */

.car-location {
    display: inline-flex;

    align-items: center;

    margin-left: 18px;

    color: var(--muted-color);

    font-size: 12px;
}

.car-location .fa {
    margin-right: 5px;

    color: var(--primary-color);
}


/*-------------------------
    Listing Price
-----------------------------*/

.product-listing-content .list-price {
    color: var(--primary-color);

    font-size: 20px;

    font-weight: 900;
}

.product-listing-content .list-price small {
    color: var(--muted-color);

    font-size: 11px;

    font-weight: 400;
}


/*-------------------------
    Featured/Category Label
-----------------------------*/

.label_icon {
    position: absolute;

    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 0 11px;

    background: var(--primary-color);

    border-radius: 50px;

    color: var(--white);

    font-size: 11px;

    font-weight: 800;

    line-height: 28px;

    text-align: center;

    box-shadow:
        0 5px 15px rgba(230, 57, 70, 0.25);
}


/*-------------------------
    Recent Added Cars
-----------------------------*/

.recent_addedcars ul {
    margin: 0;

    padding: 0;
}

.recent_addedcars ul li {
    display: block;

    list-style: none;

    margin: 0 auto 15px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--border-color);

    overflow: hidden;
}

.recent_addedcars ul li:last-child {
    border-bottom: none;

    margin-bottom: 0;
}


/* Recent image */

.recent_post_img {
    float: left;

    width: 34%;

    overflow: hidden;

    border-radius: 7px;
}

.recent_post_img img {
    display: block;

    width: 100%;

    transition: transform 0.35s ease;
}

.recent_post_img:hover img {
    transform: scale(1.07);
}


/* Recent title */

.recent_post_title {
    float: right;

    width: 66%;

    padding: 3px 10px;
}

.recent_post_title a {
    color: var(--heading-color);

    font-size: 13px;

    font-weight: 800;

    line-height: 1.5;
}

.recent_post_title a:hover {
    color: var(--primary-color);
}


/* Recent price */

.widget_price {
    color: var(--primary-color);

    font-size: 12px;

    font-weight: 800;

    margin: 4px 0 0;
}


/*-------------------------
    Sell Car Quote
-----------------------------*/

.sell_car_quote {
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(8, 12, 20, 0.86),
            rgba(8, 12, 20, 0.58)
        ),
        url("../images/img_390x390.jpg") !important;

    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

    padding: 45px 25px !important;

    border-radius: 12px;

    overflow: hidden;
}

.sell_car_quote h4,
.sell_car_quote h5 {
    position: relative;

    color: var(--white);

    z-index: 1;
}

.sell_car_quote p {
    position: relative;

    color: rgba(255, 255, 255, 0.78);

    z-index: 1;
}

.sell_car_quote .btn {
    position: relative;

    margin-bottom: 10px;

    z-index: 1;
}


/*========================================
    8. Listing Grid Style
=============================================*/

.grid_listing .product-listing-m {
    display: block;

    width: 100%;

    margin: 0 auto 30px;

    border-radius: 14px;
}


/* Image */

.grid_listing .product-listing-img {
    float: none;

    width: 100%;

    height: auto;

    overflow: hidden;
}

.grid_listing .product-listing-img img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: cover;
}


/* Content */

.grid_listing .product-listing-content {
    float: none;

    width: 100%;

    padding: 20px 20px 0;
}

.grid_listing .product-listing-content h5 {
    line-height: 1.4;

    margin: 0 auto 15px;
}

.grid_listing .product-listing-content .list-price {
    display: inline-block;

    color: var(--primary-color);

    font-size: 19px;

    font-weight: 900;

    margin: 0;

    vertical-align: middle;
}

.grid_listing .product-listing-content .car-location {
    float: right;

    margin-top: 5px;
}


/* Feature list */

.grid_listing .product-listing-content ul.features_list {
    clear: both;

    background: #f8fafc;

    border-top: 1px solid var(--border-color);

    margin: 16px -20px 0;

    padding: 15px 20px;
}

.grid_listing .product-listing-content ul.features_list li {
    width: 50%;

    color: var(--muted-color);

    margin-bottom: 7px;

    font-size: 12px;
}

.grid_listing .product-listing-content ul.features_list li .fa {
    color: var(--primary-color);
}


/* Grid clearing */

.grid_listing:nth-child(3n+1) {
    clear: left;
}

.grid_listing:nth-child(3n) {
    clear: right;
}


/*-------------------------
    Listing Responsive
-----------------------------*/

@media (max-width: 991px) {

    .listing-page {
        padding: 60px 0;
    }

    .product-listing-m {
        display: block;
    }

    .product-listing-img,
    .product-listing-content {
        width: 100%;
    }

    .product-listing-img {
        height: auto;
    }

    .product-listing-img img {
        height: auto;
    }

    .product-listing-content {
        padding: 20px;
    }

    .result-sorting-wrapper {
        flex-direction: column;

        align-items: flex-start;
    }

    .result-sorting-by {
        width: 100%;

        justify-content: space-between;
    }
}


@media (max-width: 767px) {

    /* Page header */

    .page-header_wrap {
        padding: 60px 15px;
    }

    .page-heading h2,
    .page-heading h1 {
        font-size: 32px;
    }


    /* Breadcrumb */

    .coustom-breadcrumb li {
        font-size: 12px;

        line-height: 25px;
    }


    /* Listing */

    .listing-page {
        padding: 45px 0;
    }

    .result-sorting-wrapper {
        gap: 12px;

        padding: 13px 15px;
    }

    .sorting-count p {
        font-size: 13px;
    }

    .result-sorting-by {
        display: flex;

        width: 100%;

        align-items: center;
    }

    .sorting-select {
        flex: 1;
    }

    .sorting-select .form-control {
        width: 100%;
    }


    /* Listing card */

    .product-listing-m {
        margin-bottom: 20px;

        border-radius: 12px;
    }

    .product-listing-content {
        padding: 17px;
    }

    .product-listing-content h5 {
        font-size: 18px;
    }

    .product-listing-content li {
        width: 50%;

        font-size: 11px;
    }

    .car-location {
        margin-left: 8px;

        font-size: 11px;
    }


    /* Grid */

    .grid_listing .product-listing-content {
        padding: 17px 17px 0;
    }

    .grid_listing .product-listing-content ul.features_list {
        margin-left: -17px;
        margin-right: -17px;

        padding: 14px 17px;
    }

    .grid_listing .product-listing-content .car-location {
        float: none;

        display: block;

        margin: 5px 0 0;
    }


    /* Recent cars */

    .recent_post_img {
        width: 30%;
    }

    .recent_post_title {
        width: 70%;
    }
}

/*=======================
    9. Listing Detail
===============================*/

.listing-detail {
    padding: 75px 0;

    background: #f8fafc;
}


/*-------------------------
    Detail Header
-----------------------------*/

.listing_detail_head {
    margin-bottom: 35px;
}

.listing_detail_header .listing_detail_head {
    margin-bottom: 0;
}


/* Vehicle title */

.listing_detail_head h1,
.listing_detail_head h2,
.listing_detail_head h3 {
    color: var(--heading-color);

    font-weight: 900;

    line-height: 1.2;

    margin-bottom: 8px;
}


/* Price */

.pricing_info .price {
    display: inline-block;

    color: var(--primary-color);

    font-size: 30px;

    font-weight: 900;

    line-height: 1;

    margin: 0;

    vertical-align: middle;
}

.pricing_info .price small {
    color: var(--muted-color);

    font-size: 12px;

    font-weight: 400;
}


/*-------------------------
    Detail Information
-----------------------------*/

.listing_more_info {
    overflow: hidden;

    padding: 50px 0;
}

.listing_info_tab {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    margin-top: 20px;

    padding: 35px;

    box-shadow: var(--shadow-sm);
}


/* Block heading */

.block-head {
    margin-bottom: 25px;
}

.block-head h4 {
    color: var(--heading-color);

    font-size: 22px;

    font-weight: 800;

    margin: 0;
}


/*-------------------------
    Information Table
-----------------------------*/

table.info-tabel {
    border-collapse: separate;

    border-spacing: 0;

    overflow: hidden;

    border: 1px solid var(--border-color);

    border-radius: 8px;
}

table.info-tabel tr td {
    border-left: none;
    border-right: none;

    border-top: 1px solid var(--border-color);

    padding: 14px 18px;

    color: var(--text-color);

    font-size: 14px;
}

table.info-tabel tr:first-child td {
    border-top: none;
}

.info-tabel tr td:first-child {
    color: var(--heading-color);

    border-left: none;

    font-weight: 800;

    background: #f8fafc;
}

.info-tabel tr td:last-child {
    border-right: none;
}


/*-------------------------
    Financing Calculator
-----------------------------*/

.financing_calculatoe {
    margin-bottom: 20px;

    padding: 25px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 10px;
}

.financing_calculatoe .btn {
    margin-top: 15px;
}


/*-------------------------
    Dealer Detail
-----------------------------*/

.dealer_detail {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 25px;
}

.dealer_detail img {
    display: block;

    max-width: 100%;

    margin: 0 auto 15px;

    border-radius: 8px;
}

.dealer_detail p {
    color: var(--text-color);

    margin: 0 auto 8px;
}

.dealer_detail p span {
    display: inline-block;

    min-width: 70px;

    color: var(--heading-color);

    font-weight: 700;

    margin: 0 5px 0 0;
}

.dealer_detail .btn {
    margin-top: 15px;

    width: 100%;
}


/*-------------------------
    Detail Tabs
-----------------------------*/

.listing_detail_wrap {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}


/* Tab navigation */

.listing_detail_wrap .nav-tabs {
    display: flex;

    flex-wrap: wrap;

    background: #f8fafc;

    border-bottom: 1px solid var(--border-color);
}

.listing_detail_wrap .nav-tabs > li {
    margin: 0;
}

.listing_detail_wrap .nav-tabs > li a {
    display: block;

    background: transparent;

    border: none;

    border-radius: 0;

    color: var(--text-color);

    font-size: 14px;

    font-weight: 700;

    line-height: 50px;

    padding: 0 25px;

    transition: var(--transition);
}

.listing_detail_wrap .nav-tabs > li.active a,
.listing_detail_wrap .nav-tabs > li:hover a {
    background: var(--primary-color);

    color: var(--white);
}


/* Tab content */

.listing_detail_wrap .tab-content {
    padding: 35px;
}

.listing_detail_wrap .tab-content h1,
.listing_detail_wrap .tab-content h2,
.listing_detail_wrap .tab-content h3,
.listing_detail_wrap .tab-content h4,
.listing_detail_wrap .tab-content h5,
.listing_detail_wrap .tab-content h6 {
    color: var(--heading-color);

    margin-top: 30px;
}

.listing_more_info table td,
.listing_more_info table th {
    font-size: 14px;
}

.listing_more_info table tr td:first-child {
    color: var(--heading-color);
}


/*-------------------------
    Similar Cars
-----------------------------*/

.similar_cars {
    padding: 35px 0;
}

.similar_cars h3 {
    color: var(--heading-color);

    font-size: 25px;

    margin-bottom: 25px;
}

.similar_cars .grid_listing:nth-child(3n+1),
.similar_cars .grid_listing:nth-child(3n) {
    clear: none;
}


/*-------------------------
    Main Features
-----------------------------*/

.main_features {
    overflow: hidden;
}

.main_features ul {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    padding: 0;

    margin: 0;
}

.main_features ul li {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 120px;
    min-height: 110px;

    margin: 0;

    padding: 15px 10px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 10px;

    list-style: none;

    text-align: center;

    transition: var(--transition);
}

.main_features ul li:hover {
    border-color: var(--primary-color);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08);

    transform: translateY(-3px);
}

.main_features ul li h5 {
    color: var(--heading-color);

    font-size: 13px;
    font-weight: 700;

    margin: 5px 0;
}

.main_features ul li p {
    color: var(--muted-color);

    font-size: 11px;

    margin: 0;
}

.main_features ul li i {
    color: var(--primary-color);

    font-size: 28px;

    margin: 0 0 5px;
}

.main_features ul li:last-child {
    margin: 0;
}


/*-------------------------
    Share Vehicle
-----------------------------*/

.share_vehicle {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    background: #111827;

    border-radius: 10px;

    padding: 18px 22px;

    margin: 0 auto 30px;
}

.share_vehicle p {
    color: var(--white);

    font-size: 14px;
    font-weight: 700;

    margin: 0 10px 0 0;
}

.share_vehicle a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    background: rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    color: var(--white);

    font-size: 14px;

    margin: 0;

    transition: var(--transition);
}

.share_vehicle a:hover {
    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);
}


/*-------------------------
    Compare
-----------------------------*/

.add_compare {
    margin: 0 0 15px;
}

.add_compare .checkbox {
    display: inline-block;

    margin: 0;

    padding: 7px 14px;

    background: #111827;

    border-radius: 6px;

    color: var(--white);
}

.add_compare .checkbox label {
    color: var(--white);

    font-size: 12px;
}

.add_compare .checkbox label::before {
    background: var(--white);

    border-color: var(--white);
}


/*-------------------------
    Detail Head Location
-----------------------------*/

.listing_detail_head .car-location {
    display: inline-flex;

    align-items: center;

    margin: 0;

    color: var(--muted-color);

    font-size: 14px;
}

.listing_detail_head .car-location .fa {
    color: var(--primary-color);

    margin-right: 6px;
}


/* Detail price info */

.listing_detail_head .price_info {
    overflow: visible;

    text-align: right;
}

.listing_detail_head .price_info p {
    color: var(--primary-color);

    font-size: 36px;

    font-weight: 900;

    margin: 0;
}

.listing_detail_head .price_info .old_price {
    color: var(--muted-color);

    font-size: 17px;

    text-decoration: line-through;

    margin-right: 7px;
}


/*-------------------------
    Other Information
-----------------------------*/

#info_toggle {
    float: left;
}

.listing_other_info {
    background: var(--white);

    border-top: 1px solid var(--border-color);

    border-bottom: 1px solid var(--border-color);

    overflow: hidden;
}

.listing_other_info button {
    position: relative;

    background: none;

    border: none;

    border-radius: 0;

    color: var(--text-color);

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;

    padding: 20px 0;

    margin: 0 35px 0 0;

    transition: var(--transition);
}

.listing_other_info button:hover {
    color: var(--primary-color);
}

.listing_other_info button i {
    color: var(--primary-color);

    margin: 0 5px 0 0;
}

.listing_other_info button:last-child {
    margin: 0;
}


/* Search other */

.search_other {
    float: right;

    background: var(--primary-color);

    color: var(--white);

    font-size: 13px;
    font-weight: 800;

    padding: 20px 22px;

    text-transform: uppercase;

    cursor: pointer;

    transition: var(--transition);
}

.search_other:hover {
    background: var(--primary-hover);

    color: var(--white);
}


/* Mobile other-info button */

#other_info {
    display: none;

    float: left;

    background: var(--primary-color);

    border-radius: 50%;

    color: var(--white);

    cursor: pointer;

    font-size: 16px;

    margin-top: 9px;

    padding: 9px 12px;

    text-transform: uppercase;
}


/*-------------------------
    Gallery Controls
-----------------------------*/

.owl-buttons {
    position: absolute;

    top: 50%;
    left: 15px;
    right: 15px;

    display: flex;

    justify-content: space-between;

    transform: translateY(-50%);

    z-index: 5;

    pointer-events: none;
}

.owl-buttons div {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: rgba(17, 24, 39, 0.75);

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    color: var(--white);

    font-size: 15px;

    padding: 0;

    text-transform: capitalize;

    pointer-events: auto;

    transition: var(--transition);
}

.owl-buttons div:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);
}

.owl-buttons .owl-next {
    float: none;
}


/*-------------------------
    Detail Header
-----------------------------*/

.listing_detail_header {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.90),
            rgba(8, 12, 20, 0.65)
        ),
        url("../images/listing-detail-header-img.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    padding: 80px 0;

    overflow: hidden;
}

.listing_detail_header .listing_detail_head {
    position: relative;

    z-index: 2;
}

.listing_detail_header .listing_detail_head h1,
.listing_detail_header .listing_detail_head h2,
.listing_detail_header .listing_detail_head h3 {
    color: var(--white);
}

.listing_detail_header .share_vehicle {
    display: inline-flex;

    background: transparent;

    padding: 0;

    margin: 0 0 0 15px;
}

.listing_detail_header .listing_detail_head .price_info .old_price {
    color: rgba(255, 255, 255, 0.60);
}

.listing_detail_header .listing_detail_head .car-location {
    color: rgba(255, 255, 255, 0.80);

    font-size: 14px;

    margin: 0 0 20px;
}

.listing_detail_header .listing_detail_head .price_info p {
    color: var(--white);
}


/*-------------------------
    Gallery
-----------------------------*/

.slick-slide img {
    display: block;

    width: 100%;
    max-width: 100%;

    border-radius: 10px;
}

.listing_images_slider {
    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background: #111827;
}

.listing_images_slider img {
    width: 100%;

    border-radius: 14px;
}


/* Thumbnail navigation */

.listing_images_slider_nav {
    position: relative;

    padding: 0 45px;

    margin: 15px auto 35px;
}

.listing_images_slider_nav .slick-slide {
    margin: 0 5px;

    cursor: pointer;

    opacity: 0.55;

    transition:
        opacity 0.25s ease;
}

.listing_images_slider_nav .slick-slide:hover,
.listing_images_slider_nav .slick-current {
    opacity: 1;
}

.listing_images_slider_nav .slick-slide img {
    border: 2px solid transparent;

    border-radius: 7px;
}

.listing_images_slider_nav .slick-current img {
    border-color: var(--primary-color);
}


/* Slick arrows */

.slick-arrow {
    position: absolute;

    top: 50%;
    left: 0;

    width: 36px;
    height: 36px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 50%;

    font-size: 0;

    transform: translateY(-50%);

    cursor: pointer;

    z-index: 5;

    transition: var(--transition);
}

.slick-arrow:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);
}

.slick-arrow.slick-next {
    right: 0;
    left: auto;
}

.slick-arrow::after {
    color: var(--heading-color);

    content: "\f105";

    font-family: "FontAwesome";

    font-size: 17px;

    line-height: 34px;
}

.slick-arrow:hover::after {
    color: var(--white);
}

.slick-arrow.slick-prev::after {
    content: "\f104";
}


/*-------------------------
    Inner Filter
-----------------------------*/

.inner-filter {
    display: none;
}


/*-------------------------
    Video
-----------------------------*/

.video_wrap {
    margin: 40px auto 0;
}

.video-box {
    overflow: hidden;

    border-radius: 12px;

    background: #111827;
}

.video-box iframe {
    display: block;

    width: 100%;
    height: 400px;

    border: none;
}


/*========================================
    10. Contact Us Page
=============================================*/

.contactus_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.82),
            rgba(8, 12, 20, 0.60)
        ),
        url("../images/contact-page-header-img.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*-------------------------
    Contact Form
-----------------------------*/

.contact_form {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 30px;

    box-shadow: var(--shadow-sm);
}

.contact_us h3 {
    color: var(--heading-color);

    font-size: 24px;

    margin-bottom: 20px;
}

.contact_form .form-control {
    margin-bottom: 8px;
}

.contact_form .form-group {
    margin-bottom: 25px;
}

.contact_form textarea.form-control {
    min-height: 140px;

    padding: 12px 15px;

    resize: vertical;
}


/*-------------------------
    Contact Details
-----------------------------*/

.contact_detail ul {
    padding: 0;

    margin: 0;
}

.contact_detail li {
    display: flex;

    align-items: center;

    list-style: none;

    color: var(--text-color);

    font-size: 14px;

    line-height: 1.6;

    margin: 0 0 18px;

    padding: 0;
}

.contact_detail li a {
    color: var(--text-color);
}

.contact_detail li a:hover {
    color: var(--primary-color);
}


/* Contact icon */

.icon_wrap .fa {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    background: #fff1f2;

    border: none;

    border-radius: 50%;

    color: var(--primary-color);

    font-size: 18px;

    margin-right: 13px;

    text-align: center;

    vertical-align: middle;

    transition: var(--transition);
}

.contact_detail li:hover .icon_wrap .fa {
    background: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);
}

.contact_info_m,
.icon_wrap {
    display: table-cell;

    vertical-align: middle;
}


/*-------------------------
    Map
-----------------------------*/

.map_wrap {
    margin: 40px 0 0;

    overflow: hidden;

    border-radius: 12px;

    border: 1px solid var(--border-color);
}

.map_wrap iframe {
    display: block;

    width: 100%;
    height: 420px;

    border: none;
}


/*-------------------------
    Detail Responsive
-----------------------------*/

@media (max-width: 991px) {

    .listing-detail {
        padding: 60px 0;
    }

    .listing_detail_header {
        padding: 65px 0;
    }

    .listing_info_tab {
        padding: 25px;
    }

    .main_features ul li {
        width: 110px;
    }

    .listing_detail_head .price_info {
        text-align: left;

        margin-top: 15px;
    }

    .listing_detail_head .price_info p {
        font-size: 30px;
    }
}


@media (max-width: 767px) {

    .listing-detail {
        padding: 45px 0;
    }


    /* Detail header */

    .listing_detail_header {
        padding: 50px 0;
    }

    .listing_detail_header .share_vehicle {
        margin: 15px 0 0;
    }


    /* Tabs */

    .listing_detail_wrap .nav-tabs {
        display: flex;

        overflow-x: auto;

        flex-wrap: nowrap;

        scrollbar-width: none;
    }

    .listing_detail_wrap .nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .listing_detail_wrap .nav-tabs > li {
        flex: 0 0 auto;
    }

    .listing_detail_wrap .nav-tabs > li a {
        white-space: nowrap;

        font-size: 12px;

        line-height: 46px;

        padding: 0 17px;
    }

    .listing_detail_wrap .tab-content {
        padding: 22px 17px;
    }


    /* Features */

    .main_features ul {
        gap: 8px;
    }

    .main_features ul li {
        width: calc(50% - 4px);

        min-height: 95px;
    }


    /* Share */

    .share_vehicle {
        padding: 15px;

        margin-bottom: 20px;
    }

    .share_vehicle p {
        width: 100%;

        margin-bottom: 5px;
    }


    /* Gallery */

    .listing_images_slider_nav {
        padding: 0 35px;

        margin-bottom: 25px;
    }

    .slick-arrow {
        width: 30px;
        height: 30px;
    }

    .slick-arrow::after {
        font-size: 14px;

        line-height: 28px;
    }


    /* Video */

    .video-box iframe {
        height: 250px;
    }


    /* Contact */

    .contact_form {
        padding: 22px 18px;
    }

    .contact_detail li {
        align-items: flex-start;
    }

    .map_wrap {
        margin-top: 25px;
    }

    .map_wrap iframe {
        height: 300px;
    }
}



/*=================
    11. FAQ Page
===========================*/

.faq_category {
    position: relative;

    min-height: 240px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 45px 30px;

    margin: 0 auto 25px;

    border: 1px solid var(--border-color);

    border-radius: 14px;

    overflow: hidden;

    text-align: center;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.faq_category::before {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(8, 12, 20, 0.88),
            rgba(8, 12, 20, 0.52)
        );

    content: "";

    transition: var(--transition);
}

.faq_category:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.12);
}

.faq_category:hover::before {
    background:
        linear-gradient(
            135deg,
            rgba(230, 57, 70, 0.82),
            rgba(8, 12, 20, 0.70)
        );
}

.faq_category > * {
    position: relative;

    z-index: 2;
}

.faq_category h3,
.faq_category h4,
.faq_category h5 {
    color: var(--white);

    font-weight: 800;
}

.faq_category p {
    color: rgba(255, 255, 255, 0.80);
}

.faq_text {
    padding: 15px 0;
}


/* FAQ backgrounds */

.knowledge_base_faq {
    background-image:
        url("../images/knowledge_base_bg.jpg");
}

.about_services_faq {
    background-image:
        url("../images/about_services_faq_bg.jpg");
}

.support_faq {
    background-image:
        url("../images/support_faq_bg.jpg");
}


/* FAQ accordion improvements */

.faq_category + .panel,
.faq_text .panel {
    border: 1px solid var(--border-color);

    border-radius: 8px;

    overflow: hidden;

    box-shadow: none;
}

.faq_text .panel-heading {
    background: var(--white);

    padding: 0;
}

.faq_text .panel-heading a {
    display: block;

    position: relative;

    color: var(--heading-color);

    font-size: 15px;

    font-weight: 700;

    padding: 18px 45px 18px 20px;
}

.faq_text .panel-heading a:hover {
    color: var(--primary-color);
}

.faq_text .panel-body {
    color: var(--text-color);

    font-size: 14px;

    line-height: 1.75;

    padding: 18px 20px;

    border-top: 1px solid var(--border-color);
}


/*=========================
    12. About Us Page
================================*/

.aboutus_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.85),
            rgba(8, 12, 20, 0.55)
        ),
        url("../images/aboutus-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* About image */

.about_img {
    position: relative;

    background: #111827;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12);
}

.about_img::after {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, 0.20)
        );

    content: "";

    pointer-events: none;
}

.about_img img {
    display: block;

    width: 100%;

    border-radius: 18px;

    transition:
        transform 0.5s ease;
}

.about_img:hover img {
    opacity: 1;

    transform: scale(1.035);
}


/* About content */

.about_content {
    padding: 15px 0;
}

.about_content h3 {
    color: var(--heading-color);

    font-size: 28px;

    line-height: 1.25;

    margin-top: 10px;

    margin-bottom: 18px;
}

.about_content p {
    color: var(--text-color);

    font-size: 15px;

    line-height: 1.8;
}

.about_content .btn {
    margin-top: 10px;
}


/*--------------------------------
    12.1. Why Choose Us
----------------------------------------*/

.video_box {
    position: relative;

    overflow: hidden;

    border-radius: 14px;

    background: #111827;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);
}

.video_box iframe {
    display: block;

    width: 100%;

    height: 360px;

    border: none;
}


/* Why choose us cards */

.listing_box {
    position: relative;

    padding: 22px;

    margin: 0 auto 20px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.listing_box:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.09);
}

.listing_box h5 {
    color: var(--heading-color);

    font-size: 17px;

    margin-bottom: 8px;
}

.listing_box p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 0;
}


/*---------------------------------
    12.2. Meet The Team
---------------------------------------*/

.team_member {
    position: relative;

    height: 100%;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.team_member:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12);
}


/* Team image */

.team_img {
    position: relative;

    overflow: hidden;

    background: #111827;
}

.team_img img {
    display: block;

    width: 100%;

    transition:
        transform 0.5s ease;
}

.team_member:hover .team_img img {
    transform: scale(1.05);
}


/* Team information */

.team_info {
    padding: 18px 20px;

    text-align: center;
}

.team_info h6 {
    color: var(--heading-color);

    font-size: 17px;

    font-weight: 800;

    margin: 0 0 5px;
}

.team_info p {
    color: var(--muted-color);

    font-size: 13px;

    margin: 0;
}


/* Hover overlay */

.team_more_info {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.team_more_info::after {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(230, 57, 70, 0.93),
            rgba(17, 24, 39, 0.94)
        );

    content: "";
}

.team_member:hover .team_more_info {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* Overlay content */

.info_wrap {
    position: relative;

    top: auto;

    width: 100%;

    transform: none;

    z-index: 2;
}

.team_more_info ul {
    padding: 0;

    margin: 15px 0 0;
}

.team_more_info ul li {
    display: inline-block;

    vertical-align: middle;

    list-style: none;

    margin: 0 3px;
}

.team_more_info ul li a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 50%;

    color: var(--heading-color);

    font-size: 15px;

    transition: var(--transition);
}

.team_more_info ul li a:hover {
    background: var(--heading-color);

    color: var(--white);

    transform: translateY(-3px);
}

.team_more_info ul li a i {
    margin: 0;
}

.team_more_info p,
.team_more_info p a {
    color: var(--white);

    font-size: 13px;

    line-height: 1.6;
}

.team_more_info p span {
    display: block;

    color: var(--white);

    font-weight: 800;

    margin-bottom: 5px;
}


/*==================
    13. 404 Page
===========================*/

.page_404 {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.80),
            rgba(8, 12, 20, 0.50)
        ),
        url("../images/error404-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* Error content */

.error_text_m {
    position: relative;

    padding: 80px 0;

    text-align: center;
}

.error_text_m h2 {
    position: relative;

    color: var(--primary-color);

    font-size: clamp(110px, 18vw, 230px);

    font-weight: 900;

    line-height: 0.9;

    text-align: center;

    margin: 0 0 20px;
}

.error_text_m h2 span {
    color: var(--heading-color);

    font-weight: 900;
}


/* Background icon */

.background_icon {
    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    z-index: 0;

    transform: translateY(-50%);

    pointer-events: none;
}

.background_icon i {
    color: #e9edf2;

    font-size: clamp(220px, 35vw, 540px);

    line-height: 1;

    vertical-align: top;
}


/* Error message */

.error_icon {
    float: none;

    display: inline-block;

    width: auto;

    padding-top: 0;

    margin-right: 20px;

    vertical-align: middle;
}

.error_icon i {
    color: var(--primary-color);

    font-size: 80px;
}

.error_msg_div {
    display: inline-block;

    width: auto;

    padding-top: 0;

    text-align: left;

    vertical-align: middle;
}

.error_msg_div h3 {
    color: var(--heading-color);

    font-size: 38px;

    line-height: 1.15;

    margin-bottom: 5px;
}

.error_msg_div h3 span {
    display: block;

    color: var(--muted-color);

    font-size: 20px;

    font-weight: 400;

    margin-top: 5px;
}

.error_msg_div p {
    color: var(--text-color);

    font-size: 14px;

    line-height: 1.7;

    max-width: 500px;
}

.error_msg_div .btn {
    margin-top: 20px;
}


/*-------------------------
    FAQ / About / 404 Responsive
-----------------------------*/

@media (max-width: 991px) {

    .faq_category {
        min-height: 210px;

        padding: 35px 25px;
    }

    .about_content {
        padding-top: 30px;
    }

    .team_member {
        margin-bottom: 25px;
    }

    .error_text_m {
        padding: 65px 0;
    }
}


@media (max-width: 767px) {

    /* FAQ */

    .faq_category {
        min-height: 190px;

        padding: 30px 20px;

        border-radius: 10px;
    }

    .faq_text {
        padding: 10px 0;
    }

    .faq_text .panel-heading a {
        font-size: 13px;

        padding: 15px 35px 15px 15px;
    }

    .faq_text .panel-body {
        font-size: 13px;

        padding: 15px;
    }


    /* About */

    .about_img {
        border-radius: 12px;
    }

    .about_img img {
        border-radius: 12px;
    }

    .about_content h3 {
        font-size: 24px;
    }

    .about_content p {
        font-size: 14px;
    }


    /* Video */

    .video_box iframe {
        height: 250px;
    }


    /* Team */

    .team_member {
        margin-bottom: 20px;
    }

    .team_more_info {
        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        height: auto;

        top: auto;
        bottom: 0;

        padding: 15px;

        background: transparent;
    }

    .team_more_info::after {
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(17, 24, 39, 0.92)
            );
    }

    .team_more_info .info_wrap {
        padding-top: 35px;
    }

    .team_more_info p {
        display: none;
    }


    /* 404 */

    .error_text_m {
        padding: 50px 15px;
    }

    .error_text_m h2 {
        font-size: 130px;

        margin-bottom: 25px;
    }

    .error_icon {
        display: block;

        margin: 0 0 10px;

        text-align: center;
    }

    .error_icon i {
        font-size: 65px;
    }

    .error_msg_div {
        display: block;

        width: 100%;

        text-align: center;
    }

    .error_msg_div h3 {
        font-size: 30px;
    }

    .error_msg_div h3 span {
        font-size: 18px;
    }

    .error_msg_div p {
        margin-left: auto;
        margin-right: auto;
    }

    .background_icon i {
        font-size: 230px;
    }
}



/*===========================
    14. Our Services Page
==================================*/

.services_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.85),
            rgba(8, 12, 20, 0.55)
        ),
        url("../images/services-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


/*-------------------------
    Service Image
-----------------------------*/

.services_image {
    position: relative;

    overflow: hidden;

    min-height: 280px;

    background: #111827;

    border-radius: 14px;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.services_image:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.13);
}

.services_image::after {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(8, 12, 20, 0.88) 100%
        );

    content: "";

    pointer-events: none;

    z-index: 1;
}

.services_image img {
    display: block;

    width: 100%;

    min-height: 280px;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}

.services_image:hover img {
    transform: scale(1.06);
}


/* Service heading */

.service_heading {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    background: transparent;

    color: var(--white);

    padding: 65px 25px 25px;

    text-align: left;
}

.service_heading h3 {
    color: var(--white);

    font-size: 22px;

    font-weight: 800;

    line-height: 1.25;

    margin: 0 0 7px;
}

.service_heading p {
    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


/*=====================
    15. Our Blog Page
==============================*/

.blog_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.85),
            rgba(8, 12, 20, 0.55)
        ),
        url("../images/blog-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}

.our_blog {
    padding: 75px 0;

    background: #f8fafc;
}


/*--------------------
    15.1 Article
-------------------------------*/

.article_wrap {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    margin-bottom: 35px;

    padding: 0 0 30px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.article_wrap:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.10);
}


/* Article text */

.article_info {
    padding: 0 30px;
}

.article_info p {
    color: var(--text-color);

    font-size: 15px;

    line-height: 1.8;

    margin: 0 auto 25px;
}


/* Article image */

.article_img {
    position: relative;

    min-height: 220px;

    margin: 0 0 25px;

    overflow: hidden;

    background: #111827;
}

.article_img::after {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(8, 12, 20, 0.82)
        );

    content: "";

    pointer-events: none;

    z-index: 1;
}

.article_img img {
    display: block;

    width: 100%;

    min-height: 220px;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}

.article_img:hover img {
    transform: scale(1.05);
}


/* Article title */

.articale_header {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    background: transparent;

    padding: 70px 30px 25px;
}

.articale_header h2 {
    margin: 0;

    line-height: 1.2;
}

.articale_header h2 a {
    color: var(--white);

    font-size: 25px;

    font-weight: 900;

    transition: var(--transition);
}

.articale_header h2 a:hover {
    color: rgba(255, 255, 255, 0.75);
}


/* Article metadata */

.article_meta {
    margin-top: 12px;
}

.article_meta ul {
    margin: 0;

    padding: 0;
}

.article_meta ul li {
    display: inline-flex;

    align-items: center;

    color: rgba(255, 255, 255, 0.75);

    font-size: 12px;

    list-style: none;

    vertical-align: middle;

    margin: 0 20px 5px 0;
}

.article_meta ul li i.fa {
    margin-right: 6px;

    color: var(--primary-color);
}

.article_meta ul li a {
    color: rgba(255, 255, 255, 0.80);
}

.article_meta ul li a:hover {
    color: var(--white);
}


/* Full article */

.article_full_info {
    border: none;

    background: var(--white);

    border-radius: 14px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}

.article_full_info .articale_header {
    position: relative;

    background: none;

    padding: 0 0 10px;
}

.article_full_info .articale_header h2 a {
    color: var(--heading-color);

    font-size: 32px;
}

.article_full_info .articale_header h2 a:hover {
    color: var(--primary-color);
}

.article_full_info .article_meta {
    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 10px 18px;

    margin: 8px auto 25px;
}

.article_full_info .article_meta li,
.article_full_info .article_meta li a {
    color: var(--muted-color);
}

.article_full_info .article_meta li i.fa {
    color: var(--primary-color);
}


/* Article body */

.article_full_info .article_info {
    padding: 0 30px 30px;
}

.article_full_info .article_info p {
    color: var(--text-color);

    font-size: 15px;

    line-height: 1.85;
}

.article_full_info .article_info h3 {
    color: var(--heading-color);

    margin-top: 30px;
}


/* Article tags */

.article_tag {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    padding: 20px 30px;

    border-top: 1px solid var(--border-color);
}

.article_tag h6 {
    color: var(--heading-color);

    font-size: 12px;

    margin: 0 5px 0 0;
}

.article_tag .tag_list {
    display: inline-block;

    margin: 0;
}


/* Tags */

.tag_list ul {
    margin: 0;

    padding: 0;
}

.tag_list li {
    display: inline-block;

    margin: 0 5px 5px 0;
}

.tag_list li a {
    display: inline-block;

    padding: 6px 11px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 50px;

    color: var(--muted-color);

    font-size: 11px;

    transition: var(--transition);
}

.tag_list li a:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);
}


/* Share article */

.share_article {
    text-align: right;
}

.share_article ul,
.share_article h6 {
    display: inline-block;

    padding: 0;

    margin: 0 5px;

    vertical-align: middle;
}

.share_article h6 {
    color: var(--heading-color);

    font-size: 12px;
}

.share_article ul li {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 50%;

    list-style: none;

    margin: 0 2px;

    text-align: center;

    vertical-align: middle;

    transition: var(--transition);
}

.share_article ul li a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: var(--text-color);

    font-size: 13px;
}

.share_article ul li a .fa {
    margin: 0;
}

.share_article ul li:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: translateY(-2px);
}

.share_article ul li:hover a {
    color: var(--white);
}


/*--------------------
    15.2. Comment List
----------------------------*/

.articale_comments {
    margin: 0 auto 80px;

    padding: 30px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    box-shadow: var(--shadow-sm);
}


/* Section heading */

.block-head {
    position: relative;

    display: inline-block;

    border-bottom: 1px solid var(--border-color);

    padding-bottom: 10px;

    padding-right: 60px;

    margin-bottom: 25px;
}

.block-head h4 {
    color: var(--heading-color);

    font-size: 21px;

    margin: 0;
}

.block-head::after {
    position: absolute;

    left: 0;
    bottom: -2px;

    width: 50px;
    height: 4px;

    background: var(--primary-color);

    content: "";
}


/* Comment list */

.commentlist {
    margin: 0 0 25px;

    padding: 0;
}

.commentlist li {
    list-style: none;

    padding: 25px 0;
}

.commentlist li.comment {
    border-bottom: 1px solid var(--border-color);
}

.commentlist li:last-child {
    border-bottom: none;
}


/* Avatar */

.comment-author img {
    float: left;
}

.commentlist li img.avatar {
    float: left;

    width: 65px;
    height: 65px;

    border: 3px solid var(--white);

    border-radius: 50%;

    margin: 0 18px 20px 0;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.10);
}


/* Comment content */

.comment-body h1,
.comment-body h2,
.comment-body h3,
.comment-body h4,
.comment-body h5,
.comment-body h6,
.comment-body table,
.comment-body ul,
.comment-body ol,
.comment-body blockquote,
.comment-body dl,
.comment-body address,
.comment-body pre,
.comment-body p,
.comment-body .reply {
    margin-left: 83px;
}

.comment-body p {
    display: block;

    color: var(--text-color);

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 12px;

    padding-bottom: 0;
}


/* Comment metadata */

.comment-meta.commentmetadata {
    margin-bottom: 5px;
}

.comment-meta.commentmetadata,
.comment-meta.commentmetadata a {
    color: #9ca3af;

    font-size: 11px;
}

.comment-author .fn {
    color: var(--heading-color);

    font-size: 14px;

    font-weight: 800;
}


/* Nested comments */

.comment ul.children {
    padding-left: 83px;
}

.comment ul.children li.comment {
    border-bottom: none;

    border-top: 1px solid var(--border-color);

    margin-top: 20px;

    padding-bottom: 0;
}


/* Comment form */

.comment-form {
    margin: 35px 0;
}

.comment-form .form-control {
    background: #f8fafc;

    border: 1px solid var(--border-color);
}

.comment-form .form-control:focus {
    background: var(--white);

    border-color: var(--primary-color);
}


/*-------------------------
    Services / Blog Responsive
-----------------------------*/

@media (max-width: 991px) {

    .services_image,
    .services_image img {
        min-height: 240px;
    }

    .article_info {
        padding: 0 22px;
    }

    .articale_header {
        padding: 55px 22px 20px;
    }

    .articale_header h2 a {
        font-size: 22px;
    }

    .articale_comments {
        padding: 25px;
    }
}


@media (max-width: 767px) {

    /* Services */

    .services_image {
        min-height: 220px;

        margin-bottom: 20px;

        border-radius: 10px;
    }

    .services_image img {
        min-height: 220px;
    }

    .service_heading {
        padding: 55px 18px 18px;

        text-align: left;
    }

    .service_heading h3 {
        font-size: 19px;
    }

    .service_heading p {
        font-size: 12px;
    }


    /* Blog */

    .our_blog {
        padding: 45px 0;
    }

    .article_wrap {
        border-radius: 10px;

        margin-bottom: 25px;
    }

    .article_img,
    .article_img img {
        min-height: 190px;
    }

    .articale_header {
        padding: 55px 18px 18px;
    }

    .articale_header h2 a {
        font-size: 20px;
    }

    .article_meta ul li {
        margin-right: 12px;

        font-size: 10px;
    }

    .article_info {
        padding: 0 18px;
    }

    .article_info p {
        font-size: 14px;

        line-height: 1.75;
    }


    /* Full article */

    .article_full_info .article_info {
        padding: 0 18px 20px;
    }

    .article_full_info .articale_header h2 a {
        font-size: 25px;
    }


    /* Tags/share */

    .article_tag {
        padding: 17px 18px;
    }

    .share_article {
        margin-top: 10px;

        text-align: left;
    }


    /* Comments */

    .articale_comments {
        padding: 20px 16px;

        border-radius: 10px;

        margin-bottom: 50px;
    }

    .commentlist li img.avatar {
        width: 55px;
        height: 55px;

        margin-right: 12px;
    }

    .comment-body h1,
    .comment-body h2,
    .comment-body h3,
    .comment-body h4,
    .comment-body h5,
    .comment-body h6,
    .comment-body table,
    .comment-body ul,
    .comment-body ol,
    .comment-body blockquote,
    .comment-body dl,
    .comment-body address,
    .comment-body pre,
    .comment-body p,
    .comment-body .reply {
        margin-left: 67px;
    }

    .comment ul.children {
        padding-left: 25px;
    }

}


/*---------------------------
    15.3. Page Pagination
--------------------------------*/

.pagination {
    display: block;

    width: 100%;

    margin: 35px auto 10px;

    text-align: center;
}

.pagination ul {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 0;

    margin: 0;
}

.pagination ul li {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 50%;

    color: var(--text-color);

    font-size: 13px;

    line-height: 1;

    list-style: none;

    margin: 0;

    text-align: center;

    vertical-align: middle;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.pagination ul li a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    color: var(--text-color);

    font-size: 13px;
}

.pagination ul li.current,
.pagination ul li:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);
}

.pagination ul li.current a,
.pagination ul li:hover a {
    color: var(--white);
}


/* Previous / Next buttons */

.pagination ul li.prev,
.pagination ul li.next {
    width: auto;

    min-width: 75px;

    border-radius: 50px;
}

.pagination ul li.prev a,
.pagination ul li.next a {
    padding: 0 15px;
}


/*--------------------------
    15.4. Side-Bar Widgets
-------------------------------------*/

.sidebar_widget {
    position: relative;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    margin: 0 auto 25px;

    padding: 24px 20px;

    box-shadow: var(--shadow-sm);

    transition:
        box-shadow 0.3s ease;
}

.sidebar_widget:hover {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.07);
}


/* Widget heading */

.widget_heading {
    position: relative;

    color: var(--heading-color);

    font-size: 18px;

    font-weight: 800;

    line-height: 1.3;

    margin: 0 0 20px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--border-color);
}

.widget_heading::after {
    position: absolute;

    left: 0;
    bottom: -2px;

    width: 38px;
    height: 3px;

    background: var(--primary-color);

    border-radius: 5px;

    content: "";
}

.widget_heading i {
    margin: 0 7px 0 0;

    color: var(--primary-color);
}


/* Search */

.blog_search {
    position: relative;

    margin-bottom: 5px;
}

.blog_search input {
    width: 100%;

    height: 46px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    padding: 0 48px 0 15px;

    color: var(--text-color);

    font-size: 13px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.blog_search input:focus {
    outline: none;

    background: var(--white);

    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(250, 40, 55, 0.08);
}

.search_btn {
    position: absolute;

    right: 7px;
    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    background: var(--primary-color);

    border: none;

    border-radius: 7px;

    color: var(--white);

    font-size: 13px;

    padding: 0;

    cursor: pointer;

    transform: translateY(-50%);

    transition: var(--transition);
}

.search_btn:hover {
    background: var(--primary-dark);

    color: var(--white);
}


/*-------------------------
    15.5. Popular Posts
---------------------------------*/

.popular_post ul {
    margin: 0;

    padding: 0;
}

.popular_post ul li {
    display: flex;

    align-items: center;

    gap: 13px;

    list-style: none;

    margin: 0 0 18px;

    padding: 0;

    overflow: hidden;
}

.popular_post ul li:last-child {
    margin-bottom: 0;
}

.popular_post ul li a {
    display: block;
}


/* Image */

.popular_post_img {
    flex: 0 0 82px;

    width: 82px;
    height: 62px;

    overflow: hidden;

    border-radius: 8px;

    background: #f1f5f9;
}

.popular_post_img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.popular_post_img:hover img {
    transform: scale(1.08);
}


/* Title */

.popular_post_title {
    flex: 1;

    width: auto;
}

.popular_post_title a {
    color: var(--heading-color);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    transition: var(--transition);
}

.popular_post_title a:hover {
    color: var(--primary-color);
}


/* Optional date */

.popular_post_title span {
    display: block;

    color: var(--muted-color);

    font-size: 10px;

    margin-top: 4px;
}


/*--------------------------
    15.6. Blog Categories
---------------------------------*/

.categories_list ul {
    margin: 0;

    padding: 0;
}

.categories_list ul li {
    position: relative;

    list-style: none;

    padding: 0;

    margin: 0;

    border-bottom: 1px solid var(--border-color);
}

.categories_list ul li:last-child {
    border-bottom: none;
}

.categories_list ul li a {
    display: flex;

    align-items: center;
    justify-content: space-between;

    position: relative;

    width: 100%;

    color: var(--text-color);

    font-size: 13px;

    font-weight: 500;

    padding: 12px 0 12px 17px;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}

.categories_list ul li a::after {
    position: absolute;

    left: 0;
    top: 50%;

    content: "\f105";

    font-family: fontawesome;

    color: var(--primary-color);

    font-size: 12px;

    transform: translateY(-50%);

    transition:
        transform 0.3s ease;
}

.categories_list ul li a:hover {
    color: var(--primary-color);

    padding-left: 22px;
}

.categories_list ul li a:hover::after {
    transform:
        translate(3px, -50%);
}


/* Optional category count */

.categories_list ul li span {
    color: var(--muted-color);

    font-size: 11px;
}


/*--------------------
    15.7. Blog Tags
----------------------------*/

.tag_list ul {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin: 0;

    padding: 0;
}

.tag_list ul li {
    display: block;

    margin: 0;

    vertical-align: top;
}

.tag_list ul li a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 32px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 50px;

    color: var(--text-color);

    font-size: 11px;

    line-height: 1;

    padding: 0 13px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.tag_list ul li a:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-2px);
}


/*-------------------------
    Blog Sidebar Responsive
-----------------------------*/

@media (max-width: 991px) {

    .sidebar_widget {
        padding: 20px 18px;
    }

    .popular_post_img {
        flex-basis: 75px;

        width: 75px;
        height: 58px;
    }
}


@media (max-width: 767px) {

    .pagination {
        margin-top: 25px;
    }

    .pagination ul {
        gap: 5px;
    }

    .pagination ul li {
        width: 34px;
        height: 34px;

        font-size: 12px;
    }

    .pagination ul li.prev,
    .pagination ul li.next {
        min-width: 65px;
    }

    .sidebar_widget {
        margin-bottom: 20px;

        border-radius: 10px;

        padding: 20px 16px;
    }

    .widget_heading {
        font-size: 16px;
    }

    .popular_post_img {
        flex-basis: 78px;

        width: 78px;
        height: 58px;
    }

    .popular_post_title a {
        font-size: 12px;
    }
}


/*==========================
    16. Profile Page
================================*/

.profile_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.85),
            rgba(8, 12, 20, 0.55)
        ),
        url("../images/profile-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}

.inner_pages {
    padding: 75px 0;

    background: #f8fafc;
}


/*--------------------------------
    User Profile Header
----------------------------------*/

.user_profile_info {
    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    max-width: 760px;

    margin: 0 auto 40px;

    padding: 25px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


/* Profile picture */

.upload_user_logo {
    position: relative;

    flex: 0 0 145px;

    width: 145px;
    height: 145px;

    overflow: hidden;

    background: #f1f5f9;

    border-radius: 50%;

    border: 4px solid var(--white);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.10);
}

.upload_user_logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


/* Change profile image overlay */

.upload_newlogo {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        rgba(8, 12, 20, 0.70)
        url("../images/change_logo.png")
        center center
        no-repeat;

    background-size: 32px;

    border-radius: 50%;

    opacity: 0;

    cursor: pointer;

    transition:
        opacity 0.3s ease;
}

.upload_user_logo:hover .upload_newlogo {
    opacity: 1;
}

.upload_newlogo input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: 100%;

    background: transparent;

    border: none;

    box-shadow: none;

    cursor: pointer;

    font-size: 0;

    opacity: 0;
}


/* Dealer / user information */

.dealer_info {
    flex: 1;

    width: auto;

    padding: 5px 0;
}

.dealer_info h3 {
    color: var(--heading-color);

    font-size: 24px;

    font-weight: 800;

    margin: 0 0 5px;
}

.dealer_info p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;

    margin: 0 0 8px;
}

.dealer_info a {
    color: var(--primary-color);

    font-size: 13px;

    font-weight: 700;
}

.dealer_info a:hover {
    color: var(--primary-dark);
}


/*--------------------------------
    Profile Main Layout
----------------------------------*/

.profile_wrap {
    display: flex;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    padding: 0;
}


/* Profile navigation */

.profile_nav {
    flex: 0 0 220px;

    width: 220px;

    background: #f8fafc;

    border-right: 1px solid var(--border-color);

    padding: 25px 12px;

    text-align: left;
}

.profile_nav ul {
    margin: 0;

    padding: 0;
}

.profile_nav ul li {
    list-style: none;

    margin: 0 0 5px;
}

.profile_nav ul li a {
    display: flex;

    align-items: center;

    position: relative;

    min-height: 44px;

    padding: 0 15px;

    border-radius: 8px;

    color: var(--text-color);

    font-size: 13px;

    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.profile_nav ul li a i {
    width: 22px;

    margin-right: 9px;

    color: var(--muted-color);

    font-size: 14px;

    text-align: center;
}

.profile_nav ul li.active a,
.profile_nav ul li a:hover {
    background: rgba(250, 40, 55, 0.08);

    color: var(--primary-color);

    transform: translateX(3px);
}

.profile_nav ul li.active a i,
.profile_nav ul li a:hover i {
    color: var(--primary-color);
}


/* Profile content */

.profile_wrap > .profile_content,
.profile_wrap > .tab-content {
    flex: 1;

    min-width: 0;

    padding: 30px;
}

.profile_wrap form {
    padding: 0;
}

.profile_wrap form .form-group {
    padding: 0;

    margin-bottom: 20px;
}

.profile_wrap form .control-label {
    display: block;

    color: var(--heading-color);

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 7px;
}


/*--------------------------------
    Profile Section Heading
----------------------------------*/

.field-title {
    position: relative;

    border: none;

    border-bottom: 1px solid var(--border-color);

    margin: 10px 0 25px;

    padding: 0 0 12px;
}

.field-title::after {
    position: absolute;

    left: 0;
    bottom: -2px;

    width: 40px;
    height: 3px;

    background: var(--primary-color);

    border-radius: 4px;

    content: "";
}

.field-title h6 {
    color: var(--heading-color);

    font-size: 18px;

    font-weight: 800;

    margin: 0;

    text-decoration: none;
}


/*====================================
    16.1. Post A Vehicle
========================================*/

.vehicle_accessories,
.vehicle_type {
    display: block;

    clear: both;

    width: 100%;

    margin: 0 auto 30px;
}


/* Vehicle type */

.vehicle_type {
    padding: 5px 0;
}

.vehicle_type .radio {
    display: inline-block;

    margin: 0 20px 10px 0;

    padding: 0;
}

.vehicle_type .radio label {
    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding-left: 34px;

    color: var(--heading-color);

    font-size: 14px;

    font-weight: 700;

    line-height: 1.4;

    cursor: pointer;
}

.vehicle_type .radio label::before {
    position: absolute;

    left: 0;
    top: 50%;

    width: 22px;
    height: 22px;

    background: var(--white);

    border: 2px solid #cbd5e1;

    border-radius: 50%;

    content: "";

    transform: translateY(-50%);

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.vehicle_type .radio input[type="radio"]:checked + label::before {
    border-color: var(--primary-color);

    box-shadow:
        inset 0 0 0 5px var(--white);

    background: var(--primary-color);

    font-size: 0;

    line-height: normal;
}


/* Accessories */

.accessories_list {
    margin-top: 10px !important;

    clear: left;

    padding: 0;
}

.accessories_list .checkbox {
    margin-bottom: 10px;
}

.accessories_list .checkbox label {
    color: var(--text-color);

    font-size: 13px;
}

.accessories_list .checkbox label::before {
    border-color: #cbd5e1;

    border-radius: 4px;
}

.accessories_list .checkbox input[type="checkbox"]:checked + label::before {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);
}


/*====================================
    Vehicle Images
========================================*/

.vehicle_images {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    width: 100%;

    margin: 0;
}

.vehicle_images > div {
    position: relative;

    float: none;

    width: 145px;
    height: 100px;

    margin: 0;

    overflow: hidden;

    background: #f1f5f9;

    border: 1px solid var(--border-color);

    border-radius: 9px;
}

.vehicle_images img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}

.vehicle_images > div:hover img {
    transform: scale(1.05);
}


/* Add more image */

.upload_more_img {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f8fafc;

    border: 2px dashed #cbd5e1;

    border-radius: 9px;

    cursor: pointer;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;
}

.upload_more_img:hover {
    background: rgba(250, 40, 55, 0.04);

    border-color: var(--primary-color);
}

.upload_more_img::after {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        url("../images/addmore_img.png")
        center center
        no-repeat;

    background-size: 30px;

    content: "";

    opacity: 0.65;

    z-index: 1;
}

.upload_more_img input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: 100%;

    background: transparent;

    border: none;

    box-shadow: none;

    cursor: pointer;

    font-size: 0;

    opacity: 0;

    z-index: 2;
}


/*====================================
    Profile Form Improvements
========================================*/

.profile_wrap .form-control {
    width: 100%;

    height: 46px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 8px;

    color: var(--text-color);

    font-size: 13px;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.profile_wrap .form-control:focus {
    background: var(--white);

    border-color: var(--primary-color);

    box-shadow:
        0 0 0 3px rgba(250, 40, 55, 0.08);

    outline: none;
}

.profile_wrap textarea.form-control {
    height: auto;

    min-height: 120px;

    padding: 12px 15px;

    resize: vertical;
}


/*====================================
    Profile Buttons
========================================*/

.profile_wrap .btn {
    border-radius: 8px;

    font-size: 13px;

    padding: 9px 22px;
}


/*====================================
    Responsive Profile
========================================*/

@media (max-width: 991px) {

    .user_profile_info {
        max-width: 100%;
    }

    .profile_wrap {
        display: block;
    }

    .profile_nav {
        width: 100%;

        border-right: none;

        border-bottom: 1px solid var(--border-color);

        padding: 12px;
    }

    .profile_nav ul {
        display: flex;

        flex-wrap: wrap;

        gap: 5px;
    }

    .profile_nav ul li {
        margin: 0;
    }

    .profile_nav ul li a {
        padding: 0 12px;

        min-height: 40px;
    }

    .profile_wrap > .profile_content,
    .profile_wrap > .tab-content {
        padding: 25px;
    }

    .vehicle_images > div {
        width: 130px;

        height: 90px;
    }
}


@media (max-width: 767px) {

    .inner_pages {
        padding: 45px 0;
    }

    .user_profile_info {
        display: block;

        text-align: center;

        padding: 25px 20px;

        border-radius: 12px;
    }

    .upload_user_logo {
        width: 120px;
        height: 120px;

        margin: 0 auto 18px;
    }

    .dealer_info {
        text-align: center;
    }

    .dealer_info h3 {
        font-size: 21px;
    }

    .profile_nav {
        overflow-x: auto;

        padding: 10px;
    }

    .profile_nav ul {
        flex-wrap: nowrap;

        width: max-content;
    }

    .profile_nav ul li a {
        white-space: nowrap;

        font-size: 12px;
    }

    .profile_wrap > .profile_content,
    .profile_wrap > .tab-content {
        padding: 20px 16px;
    }

    .field-title {
        margin-top: 5px;
    }

    .vehicle_type .radio {
        display: block;

        margin-right: 0;
    }

    .vehicle_images {
        gap: 8px;
    }

    .vehicle_images > div {
        width: calc(50% - 4px);

        height: 100px;
    }

    .upload_more_img {
        width: calc(50% - 4px) !important;
    }
}

/*========================================
    16.2. My Vehicles
========================================*/

.my_vehicles_list {
    width: 100%;
}

.my_vehicles_list ul.vehicle_listing {
    margin: 0 0 40px;
    padding: 0;
}

.my_vehicles_list ul.vehicle_listing li {
    display: flex;
    align-items: center;

    position: relative;

    min-height: 125px;

    list-style: none;

    margin: 0 0 15px;

    padding: 15px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.my_vehicles_list ul.vehicle_listing li:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.09);
}


/* Vehicle image */

.vehicle_img {
    flex: 0 0 145px;

    width: 145px;
    height: 90px;

    margin-right: 20px;

    overflow: hidden;

    background: #f1f5f9;

    border-radius: 9px;
}

.vehicle_img img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: cover;

    transition:
        transform 0.4s ease;
}

.my_vehicles_list ul.vehicle_listing li:hover .vehicle_img img {
    transform: scale(1.05);
}


/* Vehicle title */

.vehicle_title {
    flex: 1;

    width: auto;

    padding: 5px 10px;
}

.vehicle_title h5 {
    margin: 0 0 6px;
}

.vehicle_title h5 a {
    color: var(--heading-color);

    font-size: 16px;

    font-weight: 800;
}

.vehicle_title h5 a:hover {
    color: var(--primary-color);
}

.vehicle_title p {
    color: var(--muted-color);

    font-size: 12px;

    line-height: 1.5;

    margin: 0;
}


/* Vehicle status */

.vehicle_status {
    flex: 0 0 170px;

    width: 170px;

    padding-left: 15px;

    text-align: right;
}

.vehicle_status .label,
.vehicle_status .status {
    display: inline-block;

    padding: 5px 10px;

    border-radius: 50px;

    background: rgba(22, 163, 74, 0.10);

    color: #16a34a;

    font-size: 11px;

    font-weight: 700;
}

.vehicle_status a i {
    margin: 0 0 0 8px;

    color: var(--muted-color);

    font-size: 16px;

    transition: var(--transition);
}

.vehicle_status a:hover i {
    color: var(--primary-color);

    transform: translateY(-2px);
}


/* Inactive vehicle */

.deactive_vehicle {
    opacity: 0.55;
}

.deactive_vehicle::after {
    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 0;

    width: auto;

    height: 1px;

    background: #cbd5e1;

    content: "";
}


/* Vehicle action buttons */

.my_vehicles_list .btn {
    border-radius: 7px;

    font-size: 11px;

    line-height: 25px;

    padding: 3px 12px;
}


/*========================================
    17. Dealer Profile
========================================*/

.dealer_profile {
    background: #f8fafc;
}


/* Dealer header */

.dealer_profile .dealer_header {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-bottom: 30px;

    padding: 25px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 15px;

    box-shadow: var(--shadow-sm);
}


/* Dealer logo */

.dealer_logo {
    flex: 0 0 145px;

    width: 145px;
    height: 145px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 15px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    box-shadow: none;

    overflow: hidden;

    text-align: center;
}

.dealer_logo img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;
}


/* Dealer info */

.dealer_profile .dealer_info {
    flex: 1;

    width: auto;

    padding: 5px 0;
}

.dealer_profile .dealer_info h3 {
    color: var(--heading-color);

    font-size: 25px;

    font-weight: 900;

    margin: 0 0 8px;
}

.dealer_profile .dealer_info p {
    color: var(--muted-color);

    font-size: 14px;

    line-height: 1.7;
}


/* Social links */

.dealer_social_links {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    padding: 0;

    margin: 18px 0 0;
}

.dealer_social_links li {
    float: none;

    list-style: none;

    margin: 0;
}

.dealer_social_links li a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    background: #f8fafc;

    border: 1px solid var(--border-color);

    border-radius: 50%;

    font-size: 15px;

    transition: var(--transition);
}

.dealer_social_links li a:hover {
    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

    transform: translateY(-3px);
}

.dealer_social_links li a i {
    margin: 0;
}


/* Social colors */

.facebook-icon a {
    color: #3a5898;
}

.twitter-icon a {
    color: #54acec;
}

.linkedin-icon a {
    color: #0777b6;
}

.google-plus-icon a {
    color: #dd4a3a;
}


/* Dealer contact */

.dealer_contact_info {
    min-height: 75px;

    padding: 15px 18px;

    margin: 0 0 12px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 10px;

    box-shadow: var(--shadow-sm);
}

.dealer_contact_info h6 {
    color: var(--muted-color);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0 0 4px;
}

.dealer_contact_info a {
    color: var(--heading-color);

    font-size: 14px;

    font-weight: 600;
}

.dealer_contact_info a:hover {
    color: var(--primary-color);
}


/* Dealer map */

.dealer_map {
    margin: 30px 0;

    overflow: hidden;

    border-radius: 12px;

    box-shadow: var(--shadow-sm);
}

.dealer_map iframe {
    display: block;

    width: 100%;

    height: 400px;

    border: 0;
}


/* Dealer listings */

.dealer_listings {
    padding: 35px 0 10px;
}

.comment_form {
    margin: 40px 0 30px;

    padding: 25px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    box-shadow: var(--shadow-sm);
}

.info_title {
    color: var(--heading-color);

    padding: 12px 0;

    margin-bottom: 20px;

    border-bottom: 1px solid var(--border-color);

    font-size: 18px;

    font-weight: 800;
}


/*========================================
    18. Dealers List
========================================*/

.dealers_list_wrap {
    margin: 0 auto 40px;
}

.dealers_listing {
    display: flex;

    align-items: center;

    gap: 20px;

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 12px;

    padding: 18px;

    margin: 0 auto 15px;

    box-shadow: var(--shadow-sm);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.dealers_listing:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.08);
}

.dealers_listing .dealer_logo {
    flex: 0 0 100px;

    width: 100px;
    height: 100px;

    padding: 10px;

    margin: 0;
}

.dealers_listing .dealer_info {
    flex: 1;

    width: auto;

    padding: 0;
}

.dealers_listing .dealer_info h5 {
    margin-bottom: 5px;
}

.dealers_listing .dealer_info h5 a {
    color: var(--heading-color);

    font-size: 17px;

    font-weight: 800;
}

.dealers_listing .dealer_info h5 a:hover {
    color: var(--primary-color);
}

.dealers_listing .dealer_info p {
    color: var(--muted-color);

    font-size: 13px;

    margin: 0;
}

.view_profile {
    flex: 0 0 auto;

    padding: 0;

    text-align: right;
}

.view_profile p {
    margin: 0;

    font-size: 13px;
}


/*========================================
    19. Compare Page
========================================*/

.compare_page {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 20, 0.82),
            rgba(8, 12, 20, 0.52)
        ),
        url("../images/compare-page-header-img.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}


/* Comparison container */

.compare_info {
    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 14px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}

.compare_info table {
    border-collapse: collapse;

    margin: 0;
}

.compare_info table td,
.compare_info table th {
    width: 25%;

    color: var(--heading-color);

    font-size: 13px;

    padding: 15px;

    border-color: var(--border-color);
}

.compare_info table th {
    background: #f8fafc;

    font-weight: 800;
}

.compare_info table td:first-child {
    background: #f8fafc;

    font-weight: 700;

    text-align: right;
}


/* Inventory information */

.inventory_info_list {
    margin-bottom: 15px;

    overflow: hidden;
}

.inventory_info_list ul {
    display: flex;

    margin: 0;

    padding: 0;
}

.inventory_info_list ul li,
.listing_heading div {
    flex: 1;

    width: auto;

    float: none;

    list-style: none;
}

.listing_heading div {
    background: #f8fafc;

    border: 1px solid var(--border-color);

    padding: 15px;

    color: var(--heading-color);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;
}

.inventory_info_list ul li div {
    min-height: 48px;

    background: var(--white);

    border: 1px solid var(--border-color);

    padding: 14px 20px;

    margin-top: -1px;

    color: var(--heading-color);

    font-size: 13px;
}

.inventory_info_list ul li.info_heading div {
    background: #f8fafc;

    font-weight: 700;

    text-align: right;
}


/* Product title */

.compare_product_title {
    margin: 0 auto 15px;
}

.compare_product_title table {
    margin: 0;

    border: 0;
}

.compare_product_title table td,
.compare_product_title table th,
.compare_product_title li {
    position: relative;

    border: 0;

    color: var(--heading-color);

    font-size: 17px;

    font-weight: 700;

    padding: 20px;

    text-align: center;
}

.compare_product_title li.listing_heading {
    color: var(--heading-color);

    text-align: right;
}

.compare_product_title .price {
    display: block;

    color: var(--primary-color);

    font-size: 16px;

    font-weight: 800;

    margin: 5px 0 0;
}

.compare_product_title a {
    color: var(--heading-color);
}

.compare_product_title a:hover {
    color: var(--primary-color);
}


/* VS badge */

.vs {
    position: absolute;

    right: -16px;
    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    background: var(--primary-color);

    border: 3px solid var(--white);

    border-radius: 50%;

    color: var(--white);

    font-size: 10px;

    font-weight: 800;

    transform: translateY(-50%);

    z-index: 2;
}


/* Divider */

.td_divider {
    display: block;

    position: absolute;

    right: 0;
    top: 15%;

    width: 2px;
    height: 70%;

    background: var(--primary-color);
}

.td_divider::after {
    position: absolute;

    right: -7px;
    top: 50%;

    border-style: solid;

    border-width: 7px;

    border-color:
        transparent
        transparent
        transparent
        var(--primary-color);

    content: "";

    transform: translateY(-50%);
}


/* Compare product image */

.compare_info .compare_product_img td,
.compare_info .compare_product_img th {
    padding: 0 10px;

    border: 0;
}

.compare_info .compare_product_img table {
    margin: 0 auto 15px;
}

.compare_product_img img {
    display: block;

    width: 100%;

    max-width: 100%;

    border-radius: 8px;
}

.compare_product_img li {
    padding: 0 10px;

    margin: 0;
}

.compare_info .compare_product_img .search_other_inventory {
    display: flex;

    align-items: center;

    min-height: 150px;

    background: var(--primary-color);

    border-radius: 10px;

    color: var(--white);

    cursor: pointer;

    font-size: 18px;

    font-weight: 700;

    padding: 25px;

    text-align: left;

    line-height: 1.4;

    transition: var(--transition);
}

.compare_info .compare_product_img .search_other_inventory:hover {
    background: var(--primary-dark);
}

.search_other_inventory i {
    float: none;

    flex: 0 0 auto;

    font-size: 55px;

    margin-right: 18px;

    text-shadow: none;

    vertical-align: middle;
}


/*========================================
    20. Coming Soon Page
========================================*/

.coming_soon_bg {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            rgba(8, 12, 20, 0.88),
            rgba(8, 12, 20, 0.62)
        ),
        url("../images/coming_soon_bg.jpg");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    z-index: -1;
}

.coming_soon_wrap {
    min-height: 100vh;

    color: var(--white);
}

.coming_soon_wrap .default-header {
    padding: 18px 0;

    background: rgba(255, 255, 255, 0.96);

    backdrop-filter: blur(10px);
}

.coming_soon_wrap h1 {
    color: var(--white);

    font-size: clamp(40px, 7vw, 72px);

    line-height: 1;

    margin-bottom: 20px;
}

.coming_soon_wrap h3 {
    color: rgba(255, 255, 255, 0.88);

    font-size: 22px;

    line-height: 1.5;

    font-weight: 400;
}

.coming_soon_content {
    display: flex;

    align-items: center;

    min-height: calc(100vh - 160px);

    padding: 120px 0 80px;
}

.coming_soon_content img {
    max-width: 100%;
}


/* Message form */

.send_msg {
    text-align: right;
}

#contact_form_popup .modal-dialog {
    max-width: 450px;

    width: calc(100% - 30px);
}

#contact_form_popup .modal-content {
    padding: 25px;

    border: 0;

    border-radius: 14px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.25);
}

#contact_form_popup .modal-header {
    border: 0;

    padding-bottom: 10px;
}


/* Countdown */

.timer_countdown {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 35px;

    margin: 45px auto;
}

.countdown-amount {
    position: relative;

    display: block;

    min-width: 75px;

    color: var(--white);

    font-size: 48px;

    font-weight: 900;

    line-height: 1;

    padding: 15px 0;

    text-align: center;
}

.countdown-amount::after {
    position: absolute;

    right: -18px;
    top: 10%;

    width: 1px;
    height: 80%;

    background: rgba(255, 255, 255, 0.25);

    content: "";
}

.countdown-amount:last-child::after {
    display: none;
}

.countdown-period {
    display: block;

    color: rgba(255, 255, 255, 0.70);

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    margin-top: 7px;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* Coming soon footer */

.coming_soon_wrap footer {
    background: rgba(255, 255, 255, 0.96);

    padding: 20px 0;

    margin-bottom: 0;
}

.coming_soon_wrap footer .copy-right {
    color: var(--heading-color);

    font-size: 13px;
}

.coming_soon_wrap .footer_widget {
    float: right;

    color: var(--heading-color);
}

.coming_soon_wrap .footer_widget ul li a {
    color: var(--heading-color);
}


/*========================================
    Responsive
========================================*/

@media (max-width: 991px) {

    .my_vehicles_list ul.vehicle_listing li {
        display: grid;

        grid-template-columns: 120px 1fr;

        gap: 15px;
    }

    .vehicle_img {
        grid-row: span 2;

        width: 120px;
        height: 85px;

        margin: 0;
    }

    .vehicle_title {
        padding: 0;
    }

    .vehicle_status {
        width: auto;

        padding: 0;

        text-align: left;
    }

    .dealer_profile .dealer_header {
        padding: 20px;
    }

    .dealers_listing {
        gap: 15px;
    }

    .dealers_listing .dealer_logo {
        flex-basis: 85px;

        width: 85px;
        height: 85px;
    }

    .timer_countdown {
        gap: 25px;
    }

    .countdown-amount {
        font-size: 40px;
    }
}


@media (max-width: 767px) {

    /* My vehicles */

    .my_vehicles_list ul.vehicle_listing li {
        display: block;

        padding: 12px;
    }

    .vehicle_img {
        width: 100%;

        height: 180px;

        margin: 0 0 12px;
    }

    .vehicle_title {
        padding: 0;

        margin-bottom: 12px;
    }

    .vehicle_title h5 a {
        font-size: 15px;
    }

    .vehicle_status {
        text-align: left;
    }


    /* Dealer profile */

    .dealer_profile .dealer_header {
        display: block;

        text-align: center;

        border-radius: 12px;
    }

    .dealer_logo {
        width: 120px;
        height: 120px;

        margin: 0 auto 18px;
    }

    .dealer_profile .dealer_info {
        text-align: center;
    }

    .dealer_social_links {
        justify-content: center;
    }

    .dealer_map iframe {
        height: 300px;
    }


    /* Dealer list */

    .dealers_listing {
        display: block;

        text-align: center;
    }

    .dealers_listing .dealer_logo {
        width: 100px;
        height: 100px;

        margin: 0 auto 15px;
    }

    .dealers_listing .dealer_info {
        margin-bottom: 15px;
    }

    .view_profile {
        text-align: center;
    }


    /* Compare */

    .compare_info {
        overflow-x: auto;
    }

    .compare_info table {
        min-width: 700px;
    }

    .inventory_info_list {
        overflow-x: auto;
    }

    .inventory_info_list ul {
        min-width: 700px;
    }

    .compare_product_title {
        overflow-x: auto;
    }

    .compare_product_title table {
        min-width: 700px;
    }


    /* Coming soon */

    .coming_soon_content {
        min-height: auto;

        padding: 100px 15px 50px;

        text-align: center;
    }

    .coming_soon_wrap h1 {
        font-size: 48px;
    }

    .coming_soon_wrap h3 {
        font-size: 18px;
    }

    .timer_countdown {
        gap: 12px;

        margin: 35px auto;
    }

    .countdown-amount {
        min-width: 55px;

        font-size: 30px;

        padding: 10px 0;
    }

    .countdown-amount::after {
        right: -7px;
    }

    .countdown-period {
        font-size: 9px;
    }

    .coming_soon_wrap .footer_widget {
        float: none;

        margin: 10px 0 0;
    }
}




/*=========================================================
    21. RESPONSIVE CSS
=========================================================*/


/*=========================================================
    TABLETS
=========================================================*/

@media (max-width: 991px) {

    html,
    body {
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Typography */

    h1 {
        font-size: 42px;
        line-height: 1.15;
    }

    h2 {
        font-size: 34px;
        line-height: 1.2;
    }

    h3 {
        font-size: 25px;
    }

    h4 {
        font-size: 20px;
    }

    p {
        font-size: 15px;
        line-height: 25px;
    }


    /* Header */

    .default-header {
        padding: 15px 0;
    }

    .header_widgets {
        width: auto;
    }

    .header_info {
        display: flex;
        align-items: center;
    }

    .social-follow {
        margin-left: 10px;
    }

    .header_widgets {
        width: auto;
    }


    /* Navigation */

    #navigation_bar {
        padding: 0;
    }

    #navigation.collapse.navbar-collapse {
        float: none;
        width: 100%;
    }

    .navbar-default .navbar-nav > li > a {
        padding: 18px 15px;
    }

    .navbar-default .navbar-nav > li.dropdown > a {
        padding: 18px 35px 18px 15px;
    }


    /* Banner */

    .banner-section {
        padding: 120px 0;
    }

    .banner_content {
        padding-left: 30px;
    }

    .banner_content h1 {
        font-size: 36px;
        line-height: 45px;
    }

    .banner_content p {
        font-size: 17px;
        line-height: 27px;
    }


    /* Sections */

    .section-padding {
        padding: 80px 0;
    }

    .section-header {
        padding-bottom: 40px;
    }

    .section-header h2 {
        margin-bottom: 20px;
    }


    /* About */

    .looking-car {
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .looking-cat-image {
        position: relative;

        right: auto;
        top: auto;

        max-width: 300px;

        margin: 30px auto 0;

        text-align: center;
    }


    /* Recent cars */

    .col-list-3 {
        width: 50%;
    }

    .col-list-3:nth-child(3n) {
        clear: none;
    }

    .col-list-3:nth-child(2n+1) {
        clear: left;
    }


    /* Featured cars */

    .featured-car-content {
        padding: 18px;
    }


    /* Testimonials */

    .testimonial-img {
        width: 150px;
        height: 150px;

        left: 15px;
    }

    .testimonial-content {
        width: calc(100% - 60px);

        padding: 30px 25px 30px 90px;
    }


    /* Services */

    .our_services {
        margin: 0 30px;
    }

    .fact_m {
        margin: 0 30px;
    }


    /* Listing */

    .listing-page,
    .listing-detail,
    .our_blog {
        padding: 60px 0;
    }

    .product-listing-img {
        width: 42%;
    }

    .product-listing-content {
        width: 58%;
        padding: 15px 15px 15px 20px;
    }


    /* Contact */

    .contact_detail li {
        padding-right: 30px;
    }


    /* Profile */

    .profile_nav {
        padding: 15px;
    }

    .profile_wrap form .form-group {
        padding: 0 10px;
    }


    /* Compare */

    .compare_info {
        overflow-x: auto;
    }


    /* Coming soon */

    .coming_soon_wrap h1 {
        font-size: 52px;
    }
}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden;
    }


    /*=====================================================
        GLOBAL
    =====================================================*/

    .container {
        width: 100%;

        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        margin-left: -10px;
        margin-right: -10px;
    }

    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }


    /* Typography */

    h1 {
        font-size: 34px;
        line-height: 1.15;
    }

    h2,
    .page-heading h2,
    .page-heading h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    h3 {
        font-size: 24px;
        line-height: 1.3;
    }

    h4 {
        font-size: 19px;
    }

    h5 {
        font-size: 17px;
        line-height: 26px;
    }

    p {
        font-size: 14px;
        line-height: 24px;
    }


    /*=====================================================
        HEADER
    =====================================================*/

    .default-header {
        padding: 12px 0;

        box-shadow:
            0 4px 18px rgba(0, 0, 0, 0.08);
    }

    .header_widgets,
    header .social-follow {
        display: none;
    }

    .navbar-header {
        display: flex;

        align-items: center;

        width: 100%;

        margin: 0 !important;
    }

    .logo {
        float: none;

        max-width: 150px;
    }

    .logo img {
        max-width: 100%;
        height: auto;
    }

    #menu_slide {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 42px;
        height: 42px;

        margin: 0 0 0 auto;

        padding: 0;

        border: 0;

        border-radius: 8px;

        background: #111;

        transition: var(--transition);
    }

    #menu_slide:hover {
        background: var(--primary-color);
    }

    #menu_slide .icon-bar {
        display: block;

        width: 20px;
        height: 2px;

        margin: 4px auto;

        background: #fff;
    }


    /*=====================================================
        MOBILE NAVIGATION
    =====================================================*/

    #navigation {
        padding: 0;
    }

    #navigation.collapse.navbar-collapse {
        float: none;

        width: 100%;

        padding: 0;

        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    #navigation .nav.navbar-nav {
        float: none;

        width: 100%;

        margin: 0;

        padding: 8px 0;
    }

    #navigation .nav.navbar-nav li {
        width: 100%;

        margin: 0;

        padding: 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li.dropdown > a {
        display: flex;

        align-items: center;

        min-height: 52px;

        padding: 13px 15px;

        font-size: 13px;

        line-height: 20px;
    }

    .navbar-default .navbar-nav > li.dropdown > a::after {
        right: 15px;

        top: 50%;

        transform: translateY(-50%);
    }


    /* Mobile dropdown */

    .navbar-nav > li > .dropdown-menu {
        position: static;

        float: none;

        width: 100%;

        margin: 0;

        padding: 0;

        border: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;

        display: none !important;
    }

    .navbar-nav > li.open > .dropdown-menu {
        display: block !important;
    }

    .navbar-nav > li > .dropdown-menu a {
        display: block;

        padding: 12px 25px;

        font-size: 12px;
    }


    /*=====================================================
        SEARCH
    =====================================================*/

    #search_toggle {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 40px;
        height: 40px;

        margin: 0 8px 0 auto;

        padding: 0;

        border: 1px solid rgba(0, 0, 0, 0.1);

        border-radius: 8px;

        color: #111;
    }

    #header-search-form {
        position: absolute;

        top: calc(100% + 8px);

        right: 15px;

        width: calc(100vw - 30px);

        padding: 8px;

        background: #fff;

        border-radius: 10px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.15);

        z-index: 100;
    }

    #header-search-form::after {
        display: none;
    }

    .header_search {
        float: none;

        padding: 0;
    }

    .header_search input {
        width: 100%;

        height: 44px;
    }


    /*=====================================================
        BANNER
    =====================================================*/

    .banner-section {
        min-height: 550px;

        display: flex;

        align-items: center;

        padding: 90px 0;
    }

    .banner_content {
        padding: 0 5px;

        text-align: center;
    }

    .banner_content h1 {
        font-size: 32px;

        line-height: 1.2;

        margin-bottom: 15px;
    }

    .banner_content p {
        font-size: 15px;

        line-height: 24px;

        margin-bottom: 25px;
    }

    .car-finder-box {
        padding: 18px;

        margin-top: 25px;

        border-radius: 10px;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .find-car-form .col-form-6 {
        float: none;

        width: 100%;

        margin: 0 !important;
    }


    /*=====================================================
        BUTTONS
    =====================================================*/

    .btn {
        min-height: 44px;

        padding: 7px 22px;

        font-size: 14px;

        line-height: 28px;

        border-radius: 7px;
    }

    .btn.btn-lg {
        padding: 14px 30px;

        font-size: 20px;

        line-height: 30px;
    }


    /*=====================================================
        SPACING
    =====================================================*/

    .section-padding {
        padding: 65px 0;
    }

    .section-header {
        padding-bottom: 35px;

        text-align: center;
    }

    .section-header h2 {
        margin-bottom: 15px;
    }

    .section-header p {
        font-size: 14px;

        line-height: 24px;
    }

    .padding_50px {
        padding: 40px 0;
    }

    .padding_4x4_40 {
        padding: 25px;
    }

    .padding_4x4_30 {
        padding: 20px;
    }

    .space-80 {
        height: 50px;
    }

    .space-60 {
        height: 40px;
    }

    .space-40 {
        height: 30px;
    }

    .space-30 {
        height: 20px;
    }


    /*=====================================================
        ABOUT
    =====================================================*/

    .looking-car {
        width: 100%;

        padding: 35px 20px;

        border-radius: 0 20px;

        text-align: center;
    }

    .looking-car-content {
        width: 100%;
    }

    .looking-car-content p {
        width: 100%;
    }

    .looking-cat-image {
        position: relative;

        right: auto;
        top: auto;

        width: 100%;

        max-width: 280px;

        margin: 25px auto 0;
    }


    /*=====================================================
        RECENT CARS
    =====================================================*/

    .recent-tab ul.nav-tabs {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        max-width: 100%;

        padding: 4px;
    }

    .recent-tab .nav.nav-tabs a {
        padding: 7px 16px;

        font-size: 12px;
    }

    .col-list-3 {
        float: none;

        width: 100%;

        padding: 0 10px;
    }

    .recent-car-list {
        margin-top: 25px;

        border-radius: 10px;

        overflow: hidden;
    }

    .car-title-m {
        padding: 16px;
    }

    .car-title-m h6 {
        max-width: 65%;
    }


    /*=====================================================
        FUN FACTS
    =====================================================*/

    .fun-facts-section {
        padding: 65px 0;
    }

    .fun-facts-m {
        width: 145px;
        height: 145px;

        margin: 10px auto;
    }

    .fun-facts-m h2 {
        font-size: 28px;
    }

    .fun-facts-m p {
        font-size: 12px;

        line-height: 18px;
    }


    /*=====================================================
        FEATURED CARS
    =====================================================*/

    .featured-car-list {
        border-radius: 10px;

        overflow: hidden;
    }

    .featured-car-content {
        padding: 17px;
    }

    .featured-car-content li {
        font-size: 12px;
    }


    /*=====================================================
        TRENDING
    =====================================================*/

    .trending-hover {
        padding: 20px;
    }


    /*=====================================================
        TESTIMONIAL
    =====================================================*/

    .testimonial-section {
        background-attachment: scroll;
    }

    .testimonial-m {
        padding: 0 10px;
    }

    .testimonial-img {
        position: relative;

        left: auto;
        top: auto;

        float: none;

        width: 110px;
        height: 110px;

        margin: 0 auto -25px;

        border-width: 4px;
    }

    .testimonial-content {
        float: none;

        width: 100%;

        padding: 50px 20px 25px;

        border-radius: 0 20px;

        text-align: center;
    }

    .testimonial-heading {
        padding-left: 0;

        margin-bottom: 20px;
    }

    .testimonial-heading::after {
        display: none;
    }

    .testimonial-content > p {
        padding-left: 0;

        font-size: 13px;
    }


    /*=====================================================
        SERVICES
    =====================================================*/

    .services_image {
        margin-bottom: 20px;

        border-radius: 0 20px;
    }

    .service_heading {
        padding: 18px 15px;
    }

    .service_heading h3 {
        font-size: 20px;
    }

    .our_services {
        margin: 0;
    }

    .services_info {
        margin: 20px auto;
    }

    .icon_box {
        width: 70px;
        height: 70px;

        margin-right: 15px;

        font-size: 27px;

        line-height: 68px;
    }


    /*=====================================================
        PAGE HEADER
    =====================================================*/

    .page-header_wrap {
        padding: 45px 15px;
    }

    .page-heading h2,
    .page-heading h1 {
        font-size: 30px;
    }

    .coustom-breadcrumb {
        padding: 0 5px;

        margin-top: 8px;
    }

    .coustom-breadcrumb li {
        font-size: 12px;

        line-height: 30px;

        padding: 0 7px;
    }


    /*=====================================================
        LISTING
    =====================================================*/

    .listing-page,
    .listing-detail,
    .our_blog {
        padding: 55px 0;
    }

    .result-sorting-wrapper {
        padding: 12px 15px;

        margin-bottom: 25px;

        border-left-width: 3px;
    }

    .sorting-count,
    .result-sorting-by {
        float: none;

        width: 100%;

        text-align: center;
    }

    .sorting-count {
        margin-bottom: 10px;
    }

    .result-sorting-by p {
        display: block;

        margin-bottom: 5px;
    }

    .sorting-select {
        padding-left: 0;
    }

    .product-listing-m {
        margin-bottom: 25px;
    }

    .product-listing-img,
    .product-listing-content {
        float: none;

        width: 100%;
    }

    .product-listing-content {
        padding: 18px;
    }

    .product-listing-content li {
        width: 50%;

        margin-bottom: 8px;
    }

    .grid_listing .product-listing-m {
        margin-bottom: 25px;

        border-radius: 10px;

        overflow: hidden;
    }


    /*=====================================================
        LISTING DETAIL
    =====================================================*/

    .listing_detail {
        padding: 55px 0;
    }

    .listing_detail_head {
        margin-bottom: 30px;

        text-align: center;
    }

    .listing_detail_head .price_info {
        text-align: center;

        margin-top: 20px;
    }

    .listing_detail_head .price_info p {
        font-size: 30px;
    }

    .listing_info_tab {
        padding: 20px;
    }

    .listing_detail_wrap {
        border-radius: 10px;

        overflow: hidden;
    }

    .listing_detail_wrap .nav-tabs {
        display: flex;

        overflow-x: auto;

        white-space: nowrap;
    }

    .listing_detail_wrap .nav-tabs > li {
        flex: 0 0 auto;
    }

    .listing_detail_wrap .nav-tabs > li a {
        font-size: 14px;

        line-height: 48px;

        padding: 0 18px;
    }

    .listing_detail_wrap .tab-content {
        padding: 20px;
    }

    .main_features ul {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 8px;
    }

    .main_features ul li {
        float: none;

        min-width: 0;
        min-height: 100px;

        margin: 0;

        padding: 15px;
    }

    .share_vehicle {
        padding: 18px;

        text-align: center;
    }

    .listing_images_slider_nav {
        padding: 0 30px;

        margin-bottom: 25px;
    }


    /*=====================================================
        TABLES
    =====================================================*/

    table {
        display: block;

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        white-space: nowrap;
    }

    table th,
    table td {
        padding: 12px;
    }


    /*=====================================================
        CONTACT
    =====================================================*/

    .contact_form {
        padding: 20px;

        margin-bottom: 40px;

        border-radius: 10px;
    }

    .contact_detail li {
        padding: 0;

        margin: 15px 0;

        font-size: 14px;
    }

    .map_wrap iframe {
        height: 300px;
    }


    /*=====================================================
        ABOUT PAGE
    =====================================================*/

    .about_content {
        padding: 20px 0;

        text-align: center;
    }

    .about_img {
        max-width: 280px;

        margin: 0 auto;
    }

    .video_box iframe {
        height: 250px;
    }


    /*=====================================================
        TEAM
    =====================================================*/

    .team_member {
        margin-bottom: 25px;

        border-radius: 10px;

        overflow: hidden;
    }

    .team_more_info ul li a {
        width: 32px;
        height: 32px;

        line-height: 32px;

        font-size: 14px;
    }


    /*=====================================================
        BLOG
    =====================================================*/

    .article_wrap {
        margin-bottom: 40px;

        padding-bottom: 35px;
    }

    .article_img {
        min-height: auto;

        margin-bottom: 15px;

        border-radius: 8px;

        overflow: hidden;
    }

    .article_img:hover img {
        transform: none;
    }

    .articale_header {
        position: relative;

        padding: 20px;

        background: #111;
    }

    .articale_header h2 {
        font-size: 24px;

        line-height: 1.3;
    }

    .article_full_info .articale_header {
        padding: 0;

        background: none;
    }

    .article_full_info .articale_header h2 {
        font-size: 28px;
    }

    .article_info p {
        font-size: 15px;

        line-height: 27px;

        margin-bottom: 20px;
    }

    .article_meta ul li {
        font-size: 12px;

        margin: 0 12px 5px 0;
    }

    .article_tag {
        padding: 15px 0;
    }

    .share_article {
        margin-top: 15px;

        text-align: left;
    }


    /*=====================================================
        COMMENTS
    =====================================================*/

    .commentlist li img.avatar {
        width: 50px;
        height: 50px;

        margin-right: 12px;
    }

    .comment-body h1,
    .comment-body h2,
    .comment-body h3,
    .comment-body h4,
    .comment-body h5,
    .comment-body h6,
    .comment-body table,
    .comment-body ul,
    .comment-body ol,
    .comment-body blockquote,
    .comment-body dl,
    .comment-body address,
    .comment-body pre,
    .comment-body p,
    .comment-body .reply {
        margin-left: 62px;
    }

    .comment-body p {
        font-size: 13px;

        line-height: 22px;
    }

    .comment ul.children {
        padding-left: 30px;
    }


    /*=====================================================
        SIDEBAR
    =====================================================*/

    .sidebar_widget {
        margin-bottom: 25px;

        padding: 18px;

        border-radius: 10px;
    }

    .popular_post ul li {
        width: 100%;

        padding: 0;

        margin-bottom: 15px;
    }


    /*=====================================================
        FAQ
    =====================================================*/

    .faq_category {
        padding: 35px 20px;

        margin-bottom: 15px;

        border-radius: 10px;
    }

    .faq_text {
        padding: 15px 0;
    }


    /*=====================================================
        PROFILE
    =====================================================*/

    .inner_pages {
        padding: 55px 0;
    }

    .user_profile_info {
        max-width: 100%;

        margin-bottom: 30px;
    }

    .upload_user_logo {
        float: none;

        width: 140px;

        margin: 0 auto 20px;
    }

    .dealer_info {
        float: none;

        width: 100%;

        padding: 10px;

        text-align: center;
    }

    .profile_nav {
        border-right: 0;

        border-bottom: 1px solid #ddd;

        padding: 10px;

        margin-bottom: 20px;

        text-align: center;
    }

    .profile_nav ul li {
        display: inline-block;

        margin: 0 5px;
    }

    .profile_nav ul li a {
        display: block;

        padding: 8px 10px;

        font-size: 12px;
    }

    .profile_wrap form .form-group {
        padding: 0;
    }


    /*=====================================================
        VEHICLE IMAGES
    =====================================================*/

    .vehicle_images > div {
        width: calc(33.333% - 7px);

        height: 85px;

        margin-right: 10px;
    }

    .vehicle_images > div:nth-child(3n) {
        margin-right: 0;
    }


    /*=====================================================
        MY VEHICLES
    =====================================================*/

    .my_vehicles_list ul.vehicle_listing li {
        display: block;

        padding: 12px;

        border-radius: 10px;
    }

    .vehicle_img {
        width: 100%;

        height: 180px;

        margin: 0 0 15px;

        border-radius: 8px;
    }

    .vehicle_title {
        float: none;

        width: 100%;

        padding: 0;

        margin-bottom: 12px;
    }

    .vehicle_status {
        float: none;

        width: 100%;

        padding: 0;

        text-align: left;
    }


    /*=====================================================
        DEALER PROFILE
    =====================================================*/

    .dealer_profile .dealer_header {
        display: block;

        padding: 20px;

        text-align: center;
    }

    .dealer_logo {
        float: none;

        width: 120px;
        height: 120px;

        margin: 0 auto 15px;
    }

    .dealer_profile .dealer_info {
        float: none;

        width: 100%;

        text-align: center;
    }

    .dealer_social_links {
        justify-content: center;
    }

    .dealer_contact_info {
        text-align: center;
    }

    .dealer_map iframe {
        height: 300px;
    }


    /*=====================================================
        DEALERS LIST
    =====================================================*/

    .dealers_listing {
        display: block;

        padding: 18px;

        text-align: center;

        border-radius: 10px;
    }

    .dealers_listing .dealer_logo {
        width: 100px;
        height: 100px;

        margin: 0 auto 15px;
    }

    .dealers_listing .dealer_info {
        width: 100%;

        margin-bottom: 15px;
    }

    .view_profile {
        text-align: center;
    }


    /*=====================================================
        COMPARE
    =====================================================*/

    .compare_info {
        overflow-x: auto;

        border-radius: 10px;

        -webkit-overflow-scrolling: touch;
    }

    .compare_info table {
        min-width: 700px;
    }

    .inventory_info_list {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .inventory_info_list ul {
        min-width: 700px;
    }

    .compare_product_title {
        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .compare_product_title table {
        min-width: 700px;
    }


    /*=====================================================
        404 PAGE
    =====================================================*/

    .error_text_m {
        padding: 20px 0;

        margin-bottom: 40px;

        text-align: center;
    }

    .error_text_m h2 {
        font-size: 120px;

        line-height: 1;
    }

    .background_icon {
        text-align: center;
    }

    .background_icon i {
        font-size: 220px;

        line-height: 180px;
    }

    .error_icon {
        float: none;

        width: 100%;

        padding: 0;

        text-align: center;
    }

    .error_icon i {
        font-size: 65px;
    }

    .error_msg_div {
        float: none;

        width: 100%;

        padding: 0;

        text-align: center;
    }

    .error_msg_div h3,
    .error_msg_div h3 span {
        font-size: 32px;
    }


    /*=====================================================
        FOOTER
    =====================================================*/

    .footer-top {
        padding: 50px 0 25px;
    }

    .footer-top h6 {
        margin: 25px 0 15px;
    }

    .footer-top ul li {
        margin-bottom: 10px;

        font-size: 13px;
    }

    .footer-bottom {
        padding: 18px 0;
    }

    .footer-bottom div {
        text-align: center !important;
    }

    .footer-bottom .footer_widget,
    .coming_soon_wrap .footer_widget {
        display: block;

        float: none;

        margin: 10px auto 0;

        text-align: center;
    }

    .copy-right {
        font-size: 12px;

        line-height: 24px;

        text-align: center;
    }

    .back-top {
        right: 12px;

        bottom: 15px;
    }

    .back-top a {
        width: 36px;
        height: 36px;

        line-height: 32px;

        box-shadow:
            0 5px 15px rgba(0, 0, 0, 0.15);
    }


    /*=====================================================
        FORM
    =====================================================*/

    .form-control {
        height: 46px;

        font-size: 14px;
    }

    textarea.form-control {
        min-height: 120px;

        padding-top: 10px;
    }


    /*=====================================================
        MODALS
    =====================================================*/

    .modal-dialog {
        width: calc(100% - 30px);

        margin: 15px auto;
    }

    .modal-content {
        padding: 0 20px 20px;

        border-radius: 12px;
    }


    /*=====================================================
        GENERAL IMAGE FIX
    =====================================================*/

    img {
        max-width: 100%;

        height: auto;
    }


    /*=====================================================
        COMING SOON
    =====================================================*/

    .coming_soon_content {
        min-height: auto;

        padding: 100px 15px 50px;

        text-align: center;
    }

    .coming_soon_wrap h1 {
        font-size: 44px;

        line-height: 1.1;
    }

    .coming_soon_wrap h3 {
        font-size: 17px;

        line-height: 26px;
    }

    .timer_countdown {
        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        margin: 30px auto;
    }

    .countdown-amount {
        min-width: 55px;

        padding: 10px 5px;

        font-size: 30px;
    }

    .countdown-amount::after {
        right: -5px;
    }

    .countdown-period {
        font-size: 8px;

        letter-spacing: .5px;
    }
}


/*=========================================================
    VERY SMALL DEVICES
=========================================================*/

@media (max-width: 480px) {

    h1 {
        font-size: 30px;
    }

    h2,
    .page-heading h2,
    .page-heading h1 {
        font-size: 27px;
    }

    h3 {
        font-size: 22px;
    }

    .banner-section {
        min-height: 500px;

        padding: 70px 0;
    }

    .banner_content h1 {
        font-size: 28px;
    }

    .banner_content p {
        font-size: 14px;
    }

    .btn.btn-lg {
        width: 100%;

        padding: 12px 20px;

        font-size: 17px;
    }

    .fun-facts-m {
        width: 125px;
        height: 125px;
    }

    .fun-facts-m h2 {
        font-size: 24px;
    }

    .main_features ul {
        grid-template-columns: 1fr 1fr;
    }

    .vehicle_images > div {
        width: calc(50% - 5px);

        height: 90px;

        margin-right: 10px;
    }

    .vehicle_images > div:nth-child(3n) {
        margin-right: 10px;
    }

    .vehicle_images > div:nth-child(2n) {
        margin-right: 0;
    }

    .error_text_m h2 {
        font-size: 90px;
    }

    .background_icon i {
        font-size: 170px;
    }

    .coming_soon_wrap h1 {
        font-size: 38px;
    }

    .countdown-amount {
        min-width: 48px;

        font-size: 25px;
    }
}
#navigation .nav.navbar-nav .dropdown-menu li:last-child {
	border:0px;
}
.navbar-default .navbar-collapse {
  border: 0 none;
  margin-top: 10px !important;
}
.user_login, .header_search {
	padding:0px;
	margin:0 0 0 5px;
}
#navigation_bar.navbar {
	min-height:inherit;
	padding:15px 0 10px;
}
.modal-dialog {
  margin: 20px auto;
  width: 90%;
}
.mid_divider {
	display:none;
}
.modal .gray_text {
  margin-top: 50px;
}
.modal-content {
  max-height: 400px;
  overflow: auto;
  padding: 0 20px 22px;
}
.modal-footer {
	padding:15px 0;
}
.dealer_info {
  padding: 0;
  width:59%;
}
.view_profile p {
  display: inline;
  font-size: 15px;
  margin: 10px 0 0 8px;
}
.comment_form {
  margin: 50px 0 110px;
}
.dealer_logo {
  margin-bottom: 20px;
  padding: 8px;
}
.dealer_profile .dealer_info {
  padding: 0;
}
.dealer_social_links {
  margin: 0;
}
.dealer_social_links li {
  margin: 0 15px 20px 0;
}
.recent_addedcars {
  overflow: hidden;
}
.recent_addedcars ul li {
	width:50%;
	float:left;
}
.product-listing-img, .product-listing-content {
	float:none;
	width:100%;
}
.product-listing-img img {
	width:100%;
}
.product-listing-content {
	padding:15px;
}
.pagination {
	margin-bottom:100px;
}
.profile_nav {
  border-bottom: 1px solid #c5c5c5;
  border-right: medium none;
  text-align:left;
  padding:20px 0;
}
.profile_nav ul li {
  display: inline-block;
  margin: 0 15px 0 0;
}
.user_profile_info {
	padding:15px;
	max-width:inherit;
}
.upload_user_logo {
  width: 160px;
}
.profile_wrap form .form-group {
  padding: 0 15px;
}
.testimonial-img {
  float: none;
  left: inherit;
  margin: 0 auto;
  position: relative;
  top: 0;
}
.testimonial-content {
  float: none;
  margin: -60px auto 0;
  max-width: 480px;
  padding: 80px 30px 30px;
  width: 100%;
}
.testimonial-heading {
  padding-left: 80px;
}
.testimonial-heading::after {
  font-size: 70px;
}
.testimonial-content > p {
  padding-left: 0;
}
.listing_detail_head .price_info {
	text-align:left;
}
.listing_detail_head .price_info p {
  margin: 20px 0 0;
}
.listing_detail_head {
  margin-bottom: 30px;
}
.listing-detail {
  padding: 60px 0;
}

.listing_detail_wrap .tab-content {
  padding: 15px;
}
.listing_detail_wrap .table-responsive {
	border:0px;
}
.listing_detail_wrap .nav-tabs > li a {
  font-size: 16px;
  line-height: 50px;
  padding: 0 10px;
}
.main_features ul li {
  margin: 0 17px 10px 0;
}
#other_info {
	display:block;
}
#info_toggle {
	display:none;
}
.col-list-3 {
	width:100%;
}
.car-info-box img, .featured-car-img img {
	width:100%;
}
.blog-info-box img {
	width:100%;
}
.blog-list {
	margin:0 auto 60px;
}
.banner-section::after {
	height:100%;
}
.banner-section {
  padding: 80px 0;
}
.banner_content {
  padding-left: 0;
}
.looking-car {
  padding: 30px;
  width: auto;
  margin:0 auto 40px;
}
.looking-cat-image {
  max-width: 350px;
  position: relative;
  right: 0;
  top: 0;
}
.looking-car-content {
	width:100%;
}
.car-info-box ul {
  padding: 0 5px;
}
.compare_info {
  overflow: scroll;
}
.compare_product_img, .compare_product_title, .compare_product_info {
  width: 1140px;
}
.compare_info h4 {
  font-weight: 400;
  line-height: 28px;
}
.coming_soon_wrap .btn {
  font-size: 14px;
  font-weight: 700;
  padding: 5px 18px;
}
.coming_soon_wrap .btn .angle_arrow {
	display:none;
}
.coming_soon_wrap .footer_widget, .coming_soon_wrap .footer_widget ul {
  float: none;
  margin: 0;
}
.coming_soon_wrap .footer_widget ul li a {
	margin:0 8px 0 0;
}
.about_info, .featured-car-list {
  margin: 0 auto 30px;
}
.fact_m, .our_services {
  margin: 0 5%;
}
.vc_row {
  display: block;
  flex-wrap: inherit;
}
#help h2 {
	line-height:40px;
	font-weight:700;
	font-size:28px;
}
.blog-info-box li {
	line-height:30px;
}
.fact_m ul li i {
	font-size:36px;
}
.fact_m ul li p {
	display:flex;
	line-height:22px;
}
.banner_text h1 {
	font-size:40px;
}
#filter_form2 {
  margin: 0 -15px;
}
.services_info p {
  display: flex;
}
.header_style2 .navbar-header {
	display:block;
}
.header_style2 .logo {
  margin: 0;
}
.header_style2 #menu_slide {
  margin: 5px 0;
}
.header_style2 .header_wrap {
  background: #111111 none repeat scroll 0 0;
  float: none;
  margin: 13px -15px 0;
  padding: 0 15px;
  text-align: left;
}
.header_style2 #navigation_bar {
	padding:15px 0 0;
}
.header_style2 .user_login {
  border: 0 none;
  display: inline-block;
  float: none;
  margin: 9px 0;
  vertical-align: middle;
}
.header_style2 .login_btn {
  float: right;
  margin: 10px 0;
  vertical-align: middle;
}
.header_style2 .login_btn .btn.btn-xs {
	margin:0;
}
.header_style2 .user_login i {
  color: #fff;
}
.header_style2 .navbar-default .navbar-nav > li > a {
  display: block;
  padding: 15px;
}
.header_style2 .navbar-nav > li, .header_style2 .navbar-nav {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  display: block;
  text-align: left;
}
.header_style2 .navbar-default .navbar-nav li:hover .dropdown-menu li a {
  color: #111;
}
.header_style2 .navbar-nav > li > .dropdown-menu a:hover,
.header_style2 .navbar-default .navbar-nav li:hover .dropdown-menu li a:hover,
.header_style2 .dropdown-menu > .active > a,
.header_style2 .dropdown-menu > .active > a:focus,
.header_style2 .dropdown-menu > .active > a:hover,
.header_style2 .dropdown-menu > li > a:focus,
.header_style2 .dropdown-menu > li > a:hover {
  background: #fff none repeat scroll 0 0;
}
#banner2 .carousel-caption {
  left: 10%;
  right: 10%;
}
.carousel-control .icon-next, .carousel-control .icon-prev {
  line-height: 16px;
}
 #banner2 h1 {
  font-size:26px;
}
#banner2 h3 {
  font-size:18px;
}



}



@media (max-width:480px) {

.sorting-count, .result-sorting-by {
	float:none;
	margin:0 auto 8px;
}
.login_btn .btn.btn-xs {
  font-size: 11px;
  padding: 0 15px;
}
.fun-facts-m {
  height: 130px;
  width: 130px;
}
.fun-facts-m h2 {
  font-size: 26px;
}
.fun-facts-m p {
  font-size: 12px;
  line-height: 14px;
}
.popular_post ul li {
  display: block;
  margin: 0 auto 20px;
  width: 100%;
}
.dealer_info p {
	font-size:14px;
	line-height:24px;
}
.dealer_info h5 {
  font-size: 18px;
  line-height: 20px;
}
.recent_addedcars ul li {
	width:100%;
	float:none;
}
.car-location {
	float:none;
	margin:20px 0 0;
}
.product-listing-content li {
	width:50%;
}
.upload_user_logo {
  float: none;
  margin-bottom: 15px;
  width: 170px;
}
.user_profile_info .dealer_info {
	float:none;
	width:100%;
}
.vehicle_img {
  width: 40%;
  margin-right:5%;
}
.vehicle_title {
  width: 55%;
}
.vehicle_status {
  clear: both;
  float: none;
  padding-top: 15px;
  text-align: left;
  width: 100%;
}
.nav-tabs > li {
	float:none;
}
.recent-tab .nav-tabs > li {
	float:left;
}
.nav-tabs > li a {
	margin:0px;
}
.col-list-3 {
	width:100%;
}
.car-info-box li {
  font-size: 12px;
  line-height: 40px;
  margin: 0 5px 0 auto;
}
.fact_m ul li {
  margin: 0 auto 20px;
  width: 100%;
}
.carousel-control .icon-next, .carousel-control .icon-prev {
  line-height: 16px;
}
#banner2 h3, #banner2 h1 {
  font-size:16px;
  margin:0 auto 5px;
}
#banner2 .btn {
  font-size: 12px;
  line-height: 24px;
  padding: 4px 26px;
}

}



@media (min-width:768px) and (max-width:991px) {
.navbar-nav > li {
  padding: 0 8px;
}
.navbar-default .navbar-nav > li > a {
  padding: 20px 5px;
  font-size:12px;
}
.navbar-default .navbar-nav > li.dropdown > a {
  padding: 20px 30px 20px 5px;
}
.navbar-nav > li > a {
  font-size: 13px;
}
#header-search-form {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1;
}
.header_search #search_toggle, #header-search-form::after {
	display:block;
}
.header_widgets {
  width: auto;
  margin:0 5px 0 0;
}
.login_btn {
	margin:2px;
}
.login_btn .btn.btn-xs {
	font-size:10px;
	padding:0 15px;
}
.social-follow {
	margin:0px;
}
.social-follow ul li a {
  font-size: 18px;
}
.social-follow ul li a i {
	margin-right:2px;
}
.circle_icon {
  font-size: 12px;
  height: 24px;
  line-height: 22px;
  margin-right: 6px;
  width: 24px;
}
.uppercase_text {
  display:none;
}
.contact-info p {
  font-size: 12px;
}
.section-padding {
  padding: 100px 0;
}
.section-header h2 {
  margin-bottom: 30px;
}
.brand-logo-list {
  width: 86%;
}
.footer-bottom div {
	text-align:left !important;
}
.footer-bottom .footer_widget {
	margin:0 30px 0 0;
}
.footer-top h6 {
  margin-bottom: 20px;
  margin-top: 50px;
}
.contact_form {
  margin-bottom: 60px;
}
.background_icon i {
  font-size: 265px;
  line-height: 240px;
}
.error_text_m h2 {
  font-size: 100px;
}
.error_icon i {
  font-size: 80px;
}
.error_icon {
  width: 22%;
}
.error_msg_div h3 {
  font-size: 50px;
}
.error_msg_div h3 span {
  font-size: 30px;
}
.error_msg_div .btn {
  margin-top: 10px;
}
.team_more_info p, .team_more_info p a {
  font-size: 13px;
  line-height: 18px;
  margin: 0 0 6px;
}
.team_more_info ul li a {
  font-size: 12px;
  height: 22px;
  line-height: 22px;
  width: 22px;
}
.fun-facts-m {
  height: 158px;
  width: 158px;
}
.fun-facts-m h2 {
  font-size: 30px;
}
.fun-facts-m p {
  font-size: 13px;
}
.about_content h3 {
  margin-top: 0;
}
.listing_box h5 {
  margin-bottom: 0;
}
.popular_post ul li {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 0 9px 0 0;
  vertical-align: top;
  width: 49%;
}
.comment-respond {
	margin-bottom:100px;
}
.comment-form {
  margin: 10px 0;
}
.article_meta ul li {
  font-size: 14px;
  margin: 0 15px 10px 0;
}
.articale_header h2 {
  font-size: 28px;
}
.articale_header {
  padding: 15px 30px;
}
.article_full_info .articale_header h2 {
	font-size:40px;
}
.services_image {
  margin-bottom: 25px;
}
.dealer_logo {
  padding: 14px;
}
.dealer_profile .dealer_info {
  padding: 5px 0;
}
.dealer_social_links {
  margin: 0;
}
.dealer_contact_info {
  margin: 0 auto 5px;
  padding: 12px;
}
.recent_addedcars {
  overflow: hidden;
}
.recent_addedcars ul li {
	width:50%;
	float:left;
}
.pagination {
	margin-bottom:100px;
}
.testimonial-m {
  margin: 0 auto;
  max-width: 580px;
}
.main_features ul li {
  margin: 0 6px 0 0;
  min-height: 103px;
  min-width: 113px;
}
.listing_detail_head .price_info {
	text-align:left;
}
.listing_detail_head .price_info p {
  margin: 20px 0 0;
}
.listing_detail_head {
  margin-bottom: 30px;
}
.listing-detail {
  padding: 60px 0;
}
#other_info {
	display:block;
}
#info_toggle {
	display:none;
}
.listing_other_info button {
  font-size: 14px;
  margin: 0 20px 0 0;
}
.banner_content {
	padding:0px;
}
.banner-section::after {
	height:100%;
}
.banner-section {
  padding: 100px 0;
}
.looking-car {
  padding: 30px;
  width: auto;
}
.looking-cat-image {
  max-width: 350px;
  position: relative;
  right: 0;
  top: 0;
}
.looking-car-content {
  width: 100%;
}
.col-list-3 {
  float: left;
  padding: 0 15px;
  width: 50%;
}
.col-list-3:nth-child(3n+1) {
  clear: inherit;
}
.blog-info-box ul {
  background: #222222 none repeat scroll 0 0;
  padding: 15px;
  position: relative;
}
.blog-info-box li {
  display:block;
  line-height: 30px;
  margin: 0;
}
.compare_info {
  overflow: scroll;
}
.compare_product_img, .compare_product_title, .compare_product_info {
  width: 1140px;
}
.user_login ul li {
  padding: 4px 8px 7px;
}

#banner2 .carousel-caption {
  left: 10%;
  right: 10%;
}
 #banner2 h1 {
  font-size:36px;
   margin-bottom:10px;
}
#banner2 h3 {
  font-size:20px;
  margin-bottom:10px;
}
#filter_form2 {
  margin: -60px 0 -20px;
}
.header_style2 .navbar-header {
  float: none;
}
.header_style2 .navbar-toggle {
  display: block;
  margin: 23px 0;
}
.header_style2 .navbar-collapse.collapse {
  display: none !important;
  float: none !important;
}
.header_style2 .navbar-collapse.collapse.in {
  display: block !important;
}
.header_style2 .header_wrap {
	float:none;
	text-align:left;
	background:#111;
	position:relative;
}
.header_style2 .header_wrap::before {
  background: #111111 none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: -440px;
  position: absolute;
  top: 0;
  width: 1000%;
}
.header_style2 .user_login {
  display: inline-block;
  float: none;
  margin: 10px 0;
  z-index:1;
  position:relative;
}
.header_style2 .login_btn {
  float: right;
  margin: 10px 0;
  z-index:1;
  position:relative;
}
.header_style2 .user_login i {
	color:#fff;
}

#fun-facts.vc_row, #fun-facts .vc_col {
	display:block;
}
#fun-facts .fact_m {
  display: block;
  margin: 0 auto;
  max-width: 718px;
  overflow: hidden;
  padding: 100px 0;
  width: auto;
}
#fun-facts .section-padding {
	padding:0px;
}
.facts_section_bg {
  height: 400px;
  position: relative;
}
.blog-info-box .share_article ul li {
  height: 25px;
  line-height: 25px;
  width: 25px;
}
.blog-info-box .share_article:hover ul {
  padding: 3px;
}


}



@media (min-width:992px) and (max-width:1200px) {
.navbar-nav > li {
  padding: 0 17px;
}
h5 {
	font-size:17px;
}
.navbar-default .navbar-nav > li > a {
  padding: 20px 5px;
}
.navbar-default .navbar-nav > li.dropdown > a {
  padding: 20px 30px 20px 5px;
}
.social-follow {
  vertical-align: top;
}
.banner_content {
	padding:0px;
}
.looking-cat-image {
  max-width: 240px;
  position: absolute;
  right: -30px;
  top: 70px;
}
.car-info-box ul {
  padding: 0 10px;
}
.car-info-box li {
  font-size: 11px;
  line-height: 40px;
  margin: 0 5px 0 auto;
}
.blog-info-box ul {
  padding: 0 10px;
}
.blog-info-box li {
  font-size: 12px;
  line-height: 40px;
  margin: 0 5px 0 auto;
}
.section-padding {
  padding: 100px 0;
}
.faq_category {
  padding: 40px 20px;
}
.footer-top h4 {
  font-size: 18px;
}
.background_icon i {
  font-size: 428px;
}
.error_msg_div h3 span {
  font-size: 30px;
}
.articale_header h2 {
	font-size:37px;
}
.article_full_info .article_meta {
  padding: 6px 15px;
}
.article_meta ul li {
  font-size: 14px;
  margin: 4px 14px 4px 0;
}
.article_tag {
  padding: 20px;
}
.article_tag  h6 {
	float:left;
}
.article_tag .tag_list {
	display:block;
}
.article_tag .tag_list li {
  margin-bottom: 6px;
}
.share_article  h6 {
	float:none;
}
.articale_header h2 {
  font-size: 32px;
}
.article_full_info .articale_header h2 {
	font-size:40px;
}
.grid_listing .product-listing-content {
  padding: 14px 14px 0;
}
.product-listing-content li {
  font-size: 11px;
}
.grid_listing .product-listing-content ul.features_list {
  margin: 16px -10px 0;
  padding: 12px;
}
.grid_listing .product-listing-content {
  padding: 10px 10px 0;
}
.sidebar_widget {
  padding: 20px 14px 20px;
}
.btn {
  padding: 5px 22px;
}
.sell_car_quote .btn {
  font-size: 14px;
  padding: 4px 15px;
}
.pagination {
  margin-bottom: 100px;
}
.listing_other_info button {
  font-size: 14px;
  margin: 0 30px 0 0;
}
.main_features ul li {
  margin: 0 8px 0 0;
  min-height: 100px;
  min-width: 108px;
  padding: 10px;
}
.share_vehicle {
  padding: 20px 15px;
}
.widget_heading i {
  margin: 0 3px 0 0;
}
.dealer_detail p span {
	font-weight:800;
	width:auto;
}
.dealer_detail p {
  font-size: 13px;
  margin: 0 auto 5px;
}
.listing_heading div {
  font-size: 14px;
  padding: 13px;
}
.inventory_info_list ul li div {
  font-size: 15px;
  padding: 14px 20px;
}
.compare_product_title table td, .compare_product_title table th, .compare_product_title li {
  font-size: 17px;
  padding: 20px;
}
.compare_info .compare_product_img .search_other_inventory {
  font-size: 23px;
  padding: 20px;
}
.fact_m ul li {
  min-height: 160px;
}
.fact_m ul li i {
  font-size: 44px;
}
.fact_m ul li p {
  display: flex;
  line-height: 20px;
}
.testimonial_wrap {
  padding: 40px 20px;
}



}

/*=========================================================
    MODERN HERO BANNER
=========================================================*/

.banner-section {
    min-height: 680px;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-image: url("../images/banner-image.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8, 12, 18, 0.94) 0%,
            rgba(8, 12, 18, 0.82) 35%,
            rgba(8, 12, 18, 0.38) 68%,
            rgba(8, 12, 18, 0.15) 100%
        );
    z-index: 0;
}

.banner-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #fa2837 0%,
        #ff4b59 50%,
        transparent 100%
    );
    z-index: 3;
}

.banner-overlay {
    position: absolute;
    width: 500px;
    height: 500px;
    right: -180px;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    box-shadow:
        0 0 0 70px rgba(255,255,255,0.02),
        0 0 0 140px rgba(255,255,255,0.015);
    z-index: 0;
}

.banner-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.banner_content {
    padding: 100px 0;
    max-width: 700px;
    animation: bannerContentIn 1s ease forwards;
}

.banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 30px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.banner-eyebrow i {
    color: #fa2837;
    font-size: 14px;
}

.banner_content h1 {
    color: #fff;
    font-size: 64px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -2px;
    margin: 0 0 24px;
    max-width: 680px;
    text-transform: none;
}

.banner_content h1 span {
    display: block;
    color: #fa2837;
    font-weight: 900;
}

.banner-description {
    color: rgba(255,255,255,0.82);
    font-size: 18px;
    line-height: 30px;
    max-width: 590px;
    margin: 0 0 32px;
}

.banner-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.banner-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fa2837;
    border: 1px solid #fa2837;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    padding: 12px 20px 12px 24px;
    box-shadow: 0 12px 30px rgba(250,40,55,0.25);
}

.banner-primary-btn:hover,
.banner-primary-btn:focus {
    background: #d91e2d;
    border-color: #d91e2d;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(250,40,55,0.35);
}

.banner-primary-btn .angle_arrow {
    width: 26px;
    height: 26px;
    line-height: 25px;
}

.banner-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 10px;
    transition: all 0.3s ease;
}

.banner-secondary-btn i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    font-size: 11px;
    padding-left: 2px;
}

.banner-secondary-btn:hover {
    color: #fff;
}

.banner-secondary-btn:hover i {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.banner-trust {
    display: flex;
    align-items: center;
    margin-top: 55px;
    max-width: 570px;
}

.trust-item {
    display: flex;
    flex-direction: column;
}

.trust-item strong {
    color: #fff;
    font-size: 20px;
    line-height: 24px;
    font-weight: 900;
}

.trust-item span {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    line-height: 18px;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trust-divider {
    height: 38px;
    width: 1px;
    margin: 0 25px;
    background: rgba(255,255,255,0.2);
}

.banner-scroll {
    position: absolute;
    right: 35px;
    bottom: 35px;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

.banner-scroll span {
    color: rgba(255,255,255,0.55);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.banner-scroll i {
    color: #fff;
    font-size: 18px;
    animation: bannerScroll 1.7s ease-in-out infinite;
}

@keyframes bannerContentIn {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bannerScroll {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(7px);
        opacity: 1;
    }
}


/*=========================================================
    HERO - TABLET
=========================================================*/

@media (max-width: 991px) {

    .banner-section {
        min-height: 620px;
    }

    .banner_content {
        padding: 90px 0;
    }

    .banner_content h1 {
        font-size: 52px;
    }

    .banner-description {
        font-size: 17px;
        line-height: 28px;
    }

    .banner-scroll {
        display: none;
    }

}


/*=========================================================
    HERO - MOBILE
=========================================================*/

@media (max-width: 767px) {

    .banner-section {
        min-height: 650px;
        background-position: 62% center;
    }

    .banner-section::before {
        background:
            linear-gradient(
                180deg,
                rgba(8,12,18,0.82) 0%,
                rgba(8,12,18,0.88) 55%,
                rgba(8,12,18,0.96) 100%
            );
    }

    .banner-overlay {
        width: 300px;
        height: 300px;
        right: -160px;
        top: 20%;
    }

    .banner_content {
        padding: 90px 0 70px;
    }

    .banner-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
        margin-bottom: 18px;
    }

    .banner_content h1 {
        font-size: 43px;
        line-height: 1.08;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .banner-description {
        font-size: 15px;
        line-height: 25px;
        max-width: 500px;
        margin-bottom: 28px;
    }

    .banner-actions {
        gap: 8px;
    }

    .banner-primary-btn {
        font-size: 13px;
        padding: 10px 14px 10px 18px;
    }

    .banner-secondary-btn {
        font-size: 13px;
    }

    .banner-trust {
        margin-top: 40px;
    }

    .trust-item strong {
        font-size: 17px;
    }

    .trust-item span {
        font-size: 9px;
    }

    .trust-divider {
        margin: 0 14px;
    }

}


/*=========================================================
    HERO - SMALL PHONES
=========================================================*/

@media (max-width: 480px) {

    .banner-section {
        min-height: 680px;
    }

    .banner_content {
        padding: 80px 0 55px;
    }

    .banner_content h1 {
        font-size: 37px;
    }

    .banner-description {
        font-size: 14px;
        line-height: 23px;
    }

    .banner-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .banner-trust {
        margin-top: 35px;
    }

    .trust-divider {
        margin: 0 9px;
    }

    .trust-item strong {
        font-size: 15px;
    }

    .trust-item span {
        font-size: 8px;
        letter-spacing: 0;
    }

}

/*=========================================================
    MODERN VEHICLES / FLEET SECTION
=========================================================*/

.vehicles-section {
    background: #f7f8fa;
    position: relative;
    overflow: hidden;
}

.vehicles-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(250, 40, 55, 0.035);
    right: -180px;
    top: 80px;
}

.section-header-modern {
    position: relative;
    margin-bottom: 45px;
}

.section-heading-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fa2837;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.section-eyebrow i {
    font-size: 14px;
}

.section-heading-wrap h2 {
    color: #111827;
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -1px;
    margin: 0 0 15px;
}

.section-heading-wrap h2 span {
    color: #fa2837;
    font-weight: 900;
}

.section-heading-wrap p {
    color: #737b87;
    font-size: 15px;
    line-height: 26px;
    max-width: 650px;
    margin: 0;
}

.view-all-cars {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    border-bottom: 2px solid #fa2837;
    padding-bottom: 7px;
}

.view-all-cars:hover {
    color: #fa2837;
}

.view-all-cars i {
    color: #fa2837;
    transition: all .3s ease;
}

.view-all-cars:hover i {
    transform: translateX(5px);
}


/*=========================================================
    VEHICLE GRID
=========================================================*/

.vehicles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    position: relative;
}


/*=========================================================
    VEHICLE CARD
=========================================================*/

.modern-car-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.07);
    transition: transform .35s ease, box-shadow .35s ease;
}

.modern-car-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.14);
}


/*=========================================================
    VEHICLE IMAGE
=========================================================*/

.modern-car-image {
    height: 235px;
    overflow: hidden;
    position: relative;
    background: #e9ebee;
}

.modern-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}

.modern-car-card:hover .modern-car-image img {
    transform: scale(1.07);
}

.car-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.15),
        transparent 45%,
        rgba(0,0,0,.35)
    );
    pointer-events: none;
}

.car-status-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    color: #16803a;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    box-shadow: 0 4px 15px rgba(0,0,0,.12);
}

.car-status-badge i {
    font-size: 11px;
}

.car-view-btn {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fa2837;
    color: #fff;
    font-size: 15px;
    opacity: 0;
    transform: translateY(10px);
    transition: all .35s ease;
}

.modern-car-card:hover .car-view-btn {
    opacity: 1;
    transform: translateY(0);
}

.car-view-btn:hover {
    background: #fff;
    color: #fa2837;
}


/*=========================================================
    VEHICLE CONTENT
=========================================================*/

.modern-car-content {
    padding: 22px 22px 18px;
}

.car-brand-name {
    color: #fa2837;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.modern-car-title {
    margin: 0 0 12px;
    line-height: 1.3;
}

.modern-car-title a {
    color: #111827;
    font-size: 20px;
    font-weight: 900;
}

.modern-car-title a:hover {
    color: #fa2837;
}


/*=========================================================
    PRICE
=========================================================*/

.modern-car-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 20px;
}

.price-value {
    color: #111827;
    font-size: 23px;
    font-weight: 900;
}

.price-period {
    color: #8a929d;
    font-size: 12px;
    font-weight: 600;
}


/*=========================================================
    SPECIFICATIONS
=========================================================*/

.modern-car-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #edf0f2;
    border-bottom: 1px solid #edf0f2;
    padding: 16px 0;
    margin-bottom: 16px;
}

.car-spec {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.car-spec + .car-spec {
    border-left: 1px solid #edf0f2;
    padding-left: 10px;
}

.car-spec-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff1f2;
    color: #fa2837;
    font-size: 11px;
}

.car-spec strong {
    display: block;
    color: #333b46;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-spec small {
    display: block;
    color: #9aa1aa;
    font-size: 9px;
    line-height: 12px;
}


/*=========================================================
    CARD FOOTER
=========================================================*/

.modern-car-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.car-location {
    margin: 0;
    color: #9299a3;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-location i {
    color: #fa2837;
    margin-right: 3px;
}

.car-details-link {
    color: #111827;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.car-details-link i {
    color: #fa2837;
    margin-left: 4px;
    transition: transform .3s ease;
}

.car-details-link:hover {
    color: #fa2837;
}

.car-details-link:hover i {
    transform: translateX(4px);
}


/*=========================================================
    BOTTOM BUTTON
=========================================================*/

.vehicles-bottom-action {
    text-align: center;
    margin-top: 45px;
}

.vehicles-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111827;
    border-radius: 5px;
    padding: 12px 18px 12px 24px;
    font-size: 13px;
    font-weight: 800;
}

.vehicles-view-all-btn:hover {
    background: #fa2837;
    color: #fff;
    transform: translateY(-2px);
}

.vehicles-view-all-btn .angle_arrow {
    width: 25px;
    height: 25px;
    line-height: 24px;
}


/*=========================================================
    NO VEHICLES
=========================================================*/

.no-cars-found {
    background: #fff;
    border-radius: 12px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(15,23,42,.06);
}

.no-cars-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff1f2;
    color: #fa2837;
    font-size: 28px;
}

.no-cars-found h3 {
    color: #111827;
    font-size: 22px;
    margin-bottom: 8px;
}

.no-cars-found p {
    color: #8a929d;
    margin: 0;
}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width: 991px) {

    .section-heading-wrap {
        align-items: flex-start;
    }

    .section-heading-wrap h2 {
        font-size: 36px;
    }

    .vehicles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width: 767px) {

    .vehicles-section {
        padding: 70px 0;
    }

    .section-heading-wrap {
        display: block;
    }

    .section-heading-wrap h2 {
        font-size: 32px;
    }

    .section-heading-wrap p {
        font-size: 14px;
        line-height: 23px;
    }

    .view-all-cars {
        margin-top: 20px;
    }

    .vehicles-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .modern-car-image {
        height: 240px;
    }

    .car-view-btn {
        opacity: 1;
        transform: none;
    }

}


/*=========================================================
    SMALL PHONES
=========================================================*/

@media (max-width: 480px) {

    .section-heading-wrap h2 {
        font-size: 29px;
    }

    .modern-car-image {
        height: 220px;
    }

    .modern-car-content {
        padding: 18px;
    }

    .modern-car-title a {
        font-size: 18px;
    }

    .price-value {
        font-size: 21px;
    }

}

/*=========================================================
    MODERN STATS SECTION
=========================================================*/

.modern-stats-section {
    position: relative;
    padding: 95px 0;
    background-image: url("../images/fun-facts-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    color: #fff;
}

.modern-stats-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(10, 12, 16, .94),
            rgba(10, 12, 16, .76),
            rgba(10, 12, 16, .92)
        );
}

.modern-stats-content {
    position: relative;
    z-index: 2;
}


/*=========================================================
    HEADING
=========================================================*/

.stats-heading {
    max-width: 650px;
    margin: 0 auto 55px;
    text-align: center;
}

.stats-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fa2837;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.stats-eyebrow i {
    font-size: 13px;
}

.stats-heading h2 {
    color: #fff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.5px;
    margin: 0 0 15px;
}

.stats-heading h2 span {
    color: #fa2837;
}

.stats-heading p {
    color: rgba(255,255,255,.68);
    font-size: 15px;
    line-height: 25px;
    margin: 0 auto;
}


/*=========================================================
    STATS GRID
=========================================================*/

.modern-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.modern-stat {
    position: relative;
    min-height: 215px;
    padding: 38px 25px;
    text-align: center;
    transition: all .35s ease;
}

.modern-stat + .modern-stat {
    border-left: 1px solid rgba(255,255,255,.12);
}

.modern-stat:hover {
    background: rgba(255,255,255,.045);
}


/*=========================================================
    ICON
=========================================================*/

.modern-stat-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(250,40,55,.5);
    border-radius: 50%;
    color: #fa2837;
    font-size: 20px;
    transition: all .35s ease;
}

.modern-stat:hover .modern-stat-icon {
    background: #fa2837;
    border-color: #fa2837;
    color: #fff;
    transform: translateY(-4px);
}


/*=========================================================
    NUMBER
=========================================================*/

.modern-stat-number {
    color: #fff;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.modern-stat-number span {
    color: #fa2837;
}


/*=========================================================
    TITLE
=========================================================*/

.modern-stat-title {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.modern-stat-line {
    width: 25px;
    height: 2px;
    background: #fa2837;
    margin: 17px auto 0;
    transition: width .35s ease;
}

.modern-stat:hover .modern-stat-line {
    width: 50px;
}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width: 991px) {

    .modern-stats-section {
        padding: 80px 0;
    }

    .stats-heading h2 {
        font-size: 34px;
    }

    .modern-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .modern-stat:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .modern-stat:nth-child(4) {
        border-top: 1px solid rgba(255,255,255,.12);
    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width: 767px) {

    .modern-stats-section {
        padding: 70px 0;
    }

    .stats-heading {
        margin-bottom: 40px;
    }

    .stats-heading h2 {
        font-size: 29px;
    }

    .stats-heading p {
        font-size: 14px;
        line-height: 23px;
    }

    .modern-stat {
        min-height: 185px;
        padding: 30px 15px;
    }

    .modern-stat-number {
        font-size: 34px;
    }

    .modern-stat-title {
        font-size: 10px;
        letter-spacing: .5px;
    }

    .modern-stat-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        font-size: 17px;
    }

}


/*=========================================================
    SMALL PHONES
=========================================================*/

@media (max-width: 480px) {

    .modern-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .modern-stat {
        min-height: 165px;
        padding: 25px 8px;
    }

    .modern-stat-number {
        font-size: 30px;
    }

    .modern-stat-title {
        font-size: 9px;
    }

    .stats-heading h2 {
        font-size: 26px;
    }

}

/*=========================================================
    PREMIUM FLEET CATEGORIES
=========================================================*/

.premium-fleet-section {
    background: #fff;
    padding: 110px 0;
}

.premium-section-header {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}

.premium-section-header > span {
    display: inline-block;
    color: #fa2837;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.premium-section-header h2 {
    color: #111;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 18px;
}

.premium-section-header h2 strong {
    font-weight: 900;
}

.premium-section-header p {
    color: #777;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}


/* Fleet Cards */

.premium-fleet-row {
    margin-left: -8px;
    margin-right: -8px;
}

.premium-fleet-row > div {
    padding-left: 8px;
    padding-right: 8px;
}

.fleet-category {
    display: block;
    color: #fff;
    text-decoration: none;
}

.fleet-category:hover,
.fleet-category:focus {
    color: #fff;
    text-decoration: none;
}

.fleet-image {
    height: 430px;
    position: relative;
    overflow: hidden;
    background: #111;
}

.fleet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.fleet-category:hover .fleet-image img {
    transform: scale(1.08);
}


/* Dark gradient */

.fleet-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.05) 20%,
            rgba(0,0,0,.25) 45%,
            rgba(0,0,0,.92) 100%
        );
    transition: .4s ease;
}

.fleet-category:hover .fleet-overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.08) 10%,
            rgba(0,0,0,.35) 45%,
            rgba(0,0,0,.96) 100%
        );
}


/* Card content */

.fleet-content {
    position: absolute;
    left: 25px;
    right: 20px;
    bottom: 25px;
}

.fleet-content > span {
    color: rgba(255,255,255,.65);
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.fleet-content h3 {
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    margin: 0 0 5px;
    text-transform: uppercase;
}

.fleet-content p {
    color: rgba(255,255,255,.8);
    font-size: 13px;
    margin: 0 0 18px;
}

.fleet-link {
    border-top: 1px solid rgba(255,255,255,.35);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    padding-top: 15px;
    text-transform: uppercase;
}

.fleet-link i {
    margin-left: 8px;
    transition: .3s ease;
}

.fleet-category:hover .fleet-link i {
    margin-left: 15px;
}


/* View all button */

.fleet-bottom {
    text-align: center;
    margin-top: 45px;
}

.fleet-all-btn {
    border: 1px solid #111;
    color: #111;
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 15px 30px;
    transition: .3s ease;
}

.fleet-all-btn i {
    margin-left: 10px;
    transition: .3s ease;
}

.fleet-all-btn:hover {
    background: #111;
    color: #fff;
    text-decoration: none;
}

.fleet-all-btn:hover i {
    margin-left: 16px;
}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width:991px) {

    .premium-fleet-section {
        padding: 80px 0;
    }

    .premium-section-header h2 {
        font-size: 36px;
    }

    .fleet-image {
        height: 380px;
        margin-bottom: 16px;
    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width:767px) {

    .premium-fleet-section {
        padding: 70px 0;
    }

    .premium-section-header {
        margin-bottom: 35px;
    }

    .premium-section-header h2 {
        font-size: 31px;
    }

    .premium-section-header p {
        font-size: 14px;
        line-height: 23px;
    }

    .premium-fleet-row {
        margin-left: -5px;
        margin-right: -5px;
    }

    .premium-fleet-row > div {
        padding-left: 5px;
        padding-right: 5px;
    }

    .fleet-image {
        height: 330px;
        margin-bottom: 10px;
    }

    .fleet-content {
        left: 18px;
        right: 15px;
        bottom: 18px;
    }

    .fleet-content h3 {
        font-size: 22px;
    }

    .fleet-content p {
        font-size: 12px;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .premium-section-header h2 {
        font-size: 28px;
    }

    .fleet-image {
        height: 300px;
    }

    .fleet-content h3 {
        font-size: 20px;
    }

    .fleet-link {
        font-size: 10px;
    }

}

/*=========================================================
    WHY CHOOSE US
=========================================================*/

.why-choose-section {
    background: #f7f7f7;
    padding: 105px 0;
}

.why-choose-header {
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
}

.why-choose-header > span {
    color: #fa2837;
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.why-choose-header h2 {
    color: #111;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 18px;
}

.why-choose-header h2 strong {
    font-weight: 900;
}

.why-choose-header p {
    color: #777;
    font-size: 16px;
    line-height: 27px;
    margin: 0;
}


/* Cards */

.why-choose-row {
    margin-left: -8px;
    margin-right: -8px;
}

.why-choose-row > div {
    padding-left: 8px;
    padding-right: 8px;
}

.why-card {
    background: #fff;
    min-height: 315px;
    padding: 35px 30px;
    position: relative;
    transition: .35s ease;
}

.why-card:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,.10);
    transform: translateY(-8px);
}

.why-number {
    color: #e8e8e8;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 20px;
}

.why-icon {
    align-items: center;
    background: #111;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 22px;
    height: 65px;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
    width: 65px;
    transition: .3s ease;
}

.why-card:hover .why-icon {
    background: #fa2837;
}

.why-card h4 {
    color: #111;
    font-size: 19px;
    font-weight: 900;
    margin: 0 0 13px;
}

.why-card p {
    color: #777;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
}


/* Bottom CTA */

.why-bottom {
    margin-top: 55px;
}

.why-bottom-line {
    background: #ddd;
    height: 1px;
    margin-bottom: 25px;
}

.why-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.why-bottom-content strong {
    color: #111;
    font-size: 20px;
    font-weight: 700;
}

.why-bottom-content a {
    border-bottom: 2px solid #fa2837;
    color: #111;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding-bottom: 8px;
    text-transform: uppercase;
    transition: .3s ease;
}

.why-bottom-content a i {
    margin-left: 8px;
    transition: .3s ease;
}

.why-bottom-content a:hover {
    color: #fa2837;
    text-decoration: none;
}

.why-bottom-content a:hover i {
    margin-left: 14px;
}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width:991px) {

    .why-choose-section {
        padding: 80px 0;
    }

    .why-choose-header h2 {
        font-size: 36px;
    }

    .why-card {
        margin-bottom: 16px;
        min-height: 290px;
    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width:767px) {

    .why-choose-section {
        padding: 70px 0;
    }

    .why-choose-header {
        margin-bottom: 35px;
    }

    .why-choose-header h2 {
        font-size: 31px;
    }

    .why-choose-header p {
        font-size: 14px;
        line-height: 23px;
    }

    .why-card {
        min-height: auto;
        margin-bottom: 12px;
        padding: 28px 25px;
    }

    .why-number {
        font-size: 40px;
    }

    .why-bottom-content {
        display: block;
        text-align: center;
    }

    .why-bottom-content strong {
        display: block;
        margin-bottom: 20px;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .why-choose-header h2 {
        font-size: 28px;
    }

    .why-icon {
        height: 58px;
        width: 58px;
        font-size: 20px;
    }

}

/*=========================================================
    EXPLORE RWANDA
=========================================================*/

.explore-rwanda-section {
    background: #111;
    padding: 110px 0;
    color: #fff;
}

.explore-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 55px;
}

.explore-heading > div {
    max-width: 520px;
}

.explore-heading span {
    color: #fa2837;
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.explore-heading h2 {
    color: #fff;
    font-size: 42px;
    font-weight: 300;
    line-height: 1.2;
    margin: 0;
}

.explore-heading h2 strong {
    font-weight: 900;
}

.explore-heading > p {
    color: #aaa;
    font-size: 15px;
    line-height: 25px;
    margin: 0;
    max-width: 420px;
}


/* Grid */

.explore-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 260px 260px;
    gap: 12px;
}

.explore-card {
    display: block;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.explore-card:hover,
.explore-card:focus {
    color: #fff;
    text-decoration: none;
}

.explore-large {
    grid-row: span 2;
}

.explore-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.explore-card:hover img {
    transform: scale(1.08);
}


/* Overlay */

.explore-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.9),
            rgba(0,0,0,.05) 70%
        );

    transition: .4s ease;
}

.explore-card:hover .explore-overlay {
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.95),
            rgba(0,0,0,.15) 75%
        );
}


/* Content */

.explore-content {
    position: absolute;
    left: 25px;
    right: 25px;
    bottom: 24px;
}

.explore-content span {
    color: rgba(255,255,255,.65);
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.explore-content h3 {
    color: #fff;
    font-size: 29px;
    font-weight: 900;
    margin: 0 0 5px;
}

.explore-content p {
    color: rgba(255,255,255,.8);
    font-size: 13px;
    margin: 0 0 15px;
}

.explore-content strong {
    border-top: 1px solid rgba(255,255,255,.35);
    color: #fff;
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding-top: 12px;
    text-transform: uppercase;
}

.explore-content strong i {
    margin-left: 7px;
    transition: .3s ease;
}

.explore-card:hover .explore-content strong i {
    margin-left: 14px;
}


/* Bottom */

.explore-bottom {
    align-items: center;
    border-top: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: space-between;
    margin-top: 45px;
    padding-top: 25px;
}

.explore-bottom span {
    color: #777;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.explore-bottom a {
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.explore-bottom a i {
    color: #fa2837;
    margin-left: 8px;
    transition: .3s ease;
}

.explore-bottom a:hover {
    color: #fa2837;
    text-decoration: none;
}

.explore-bottom a:hover i {
    margin-left: 15px;
}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width:991px) {

    .explore-rwanda-section {
        padding: 80px 0;
    }

    .explore-heading h2 {
        font-size: 36px;
    }

    .explore-heading {
        display: block;
    }

    .explore-heading > p {
        margin-top: 20px;
    }

    .explore-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 300px 220px 220px;
    }

    .explore-large {
        grid-column: span 2;
        grid-row: span 1;
    }

}


/*=========================================================
    MOBILE
=========================================================*/

@media (max-width:767px) {

    .explore-rwanda-section {
        padding: 70px 0;
    }

    .explore-heading {
        margin-bottom: 35px;
    }

    .explore-heading h2 {
        font-size: 31px;
    }

    .explore-heading > p {
        font-size: 14px;
        line-height: 23px;
    }

    .explore-grid {
        display: block;
    }

    .explore-card {
        height: 300px;
        margin-bottom: 10px;
    }

    .explore-large {
        height: 350px;
    }

    .explore-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .explore-content h3 {
        font-size: 25px;
    }

    .explore-bottom {
        display: block;
        text-align: center;
    }

    .explore-bottom span {
        display: block;
        margin-bottom: 20px;
    }

}


/*=========================================================
    SMALL MOBILE
=========================================================*/

@media (max-width:480px) {

    .explore-heading h2 {
        font-size: 28px;
    }

    .explore-card {
        height: 270px;
    }

    .explore-large {
        height: 320px;
    }

}

/* =========================================================
   MODERN CAR LISTING PAGE
========================================================= */

/* -------------------------
   HERO HEADER
------------------------- */

.listing-hero {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(8, 12, 18, 0.72), rgba(8, 12, 18, 0.82)),
        url("../images/listing-page-header-img.jpg") center center / cover no-repeat;
    overflow: hidden;
}

.listing-hero::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    right: -100px;
    top: -150px;
}

.listing-hero::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    right: 80px;
    bottom: -180px;
}

.listing-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.25)
    );
}

.listing-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 65px 0;
}

.listing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fa2837;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.listing-hero-eyebrow i {
    font-size: 15px;
}

.listing-hero h1 {
    color: #fff;
    font-size: 54px;
    font-weight: 900;
    line-height: 1.08;
    margin: 0 0 18px;
}

.listing-hero h1 span {
    color: #fa2837;
}

.listing-hero-content > p {
    color: rgba(255,255,255,0.78);
    font-size: 17px;
    line-height: 28px;
    max-width: 600px;
    margin: 0 0 28px;
}

.listing-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}

.listing-breadcrumb a {
    color: #fff;
    font-weight: 700;
}

.listing-breadcrumb i {
    color: #fa2837;
}


/* -------------------------
   LISTING PAGE
------------------------- */

.modern-listing-page {
    background: #f7f8fa;
    padding: 75px 0 90px;
}


/* -------------------------
   TOP BAR
------------------------- */

.listing-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 38px;
}

.listing-result {
    position: relative;
    padding-left: 18px;
}

.listing-result::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: #fa2837;
    border-radius: 5px;
}

.listing-result-label {
    display: block;
    color: #fa2837;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.listing-result h2 {
    color: #111;
    font-size: 28px;
    font-weight: 900;
    margin: 0;
}

.listing-result h2 span {
    color: #777;
    font-size: 15px;
    font-weight: 400;
    margin-left: 7px;
}

.listing-intro {
    max-width: 470px;
    text-align: right;
}

.listing-intro p {
    color: #777;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
}


/* -------------------------
   VEHICLE GRID
------------------------- */

.modern-listing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}


/* -------------------------
   CAR CARD
------------------------- */

.listing-car-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 8px 35px rgba(0,0,0,0.07);
    transition: all 0.35s ease;
}

.listing-car-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.13);
}


/* -------------------------
   IMAGE
------------------------- */

.listing-car-image {
    height: 265px;
    position: relative;
    overflow: hidden;
    background: #eee;
}

.listing-car-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.listing-car-card:hover .listing-car-image img {
    transform: scale(1.06);
}

.listing-image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(
        transparent,
        rgba(0,0,0,0.55)
    );
    pointer-events: none;
}


/* -------------------------
   AVAILABILITY
------------------------- */

.listing-availability {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(20,145,75,0.95);
    color: #fff;
    padding: 7px 13px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.listing-availability i {
    margin-right: 5px;
}


/* -------------------------
   PRICE BADGE
------------------------- */

.listing-price-badge {
    position: absolute;
    right: 16px;
    bottom: 15px;
    color: #fff;
    text-align: right;
    z-index: 2;
}

.listing-price-badge strong {
    font-size: 24px;
    font-weight: 900;
}

.listing-price-badge span {
    font-size: 12px;
    opacity: .85;
}


/* -------------------------
   CONTENT
------------------------- */

.listing-car-content {
    padding: 25px;
}

.listing-car-brand {
    display: block;
    color: #fa2837;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.listing-car-content h3 {
    margin: 0 0 20px;
    font-size: 21px;
    line-height: 28px;
}

.listing-car-content h3 a {
    color: #111;
    transition: color .25s ease;
}

.listing-car-content h3 a:hover {
    color: #fa2837;
}


/* -------------------------
   SPECS
------------------------- */

.listing-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 17px 0;
    margin-bottom: 18px;
}

.listing-spec {
    display: flex;
    align-items: center;
    gap: 9px;
    border-right: 1px solid #eee;
    padding-left: 4px;
}

.listing-spec:last-child {
    border-right: 0;
}

.listing-spec > i {
    color: #fa2837;
    font-size: 16px;
}

.listing-spec strong {
    display: block;
    color: #222;
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
}

.listing-spec span {
    display: block;
    color: #999;
    font-size: 10px;
    margin-top: 2px;
}


/* -------------------------
   DESCRIPTION
------------------------- */

.listing-car-description {
    color: #888;
    font-size: 13px;
    line-height: 21px;
    margin: 0 0 20px;
}


/* -------------------------
   CARD FOOTER
------------------------- */

.listing-car-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 3px;
}

.listing-location {
    color: #888;
    font-size: 12px;
}

.listing-location i {
    color: #fa2837;
    margin-right: 5px;
}

.listing-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #111;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: all .3s ease;
}

.listing-details-btn i {
    color: #fa2837;
    transition: transform .3s ease;
}

.listing-details-btn:hover {
    color: #fa2837;
}

.listing-details-btn:hover i {
    transform: translateX(5px);
}


/* -------------------------
   EMPTY STATE
------------------------- */

.listing-empty-state {
    background: #fff;
    padding: 80px 30px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

.listing-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff1f2;
    color: #fa2837;
    font-size: 32px;
    line-height: 80px;
}

.listing-empty-state h3 {
    margin: 0 0 10px;
    color: #111;
}

.listing-empty-state p {
    color: #888;
    margin-bottom: 25px;
}

.listing-empty-btn {
    display: inline-block;
    background: #fa2837;
    color: #fff;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.listing-empty-btn:hover {
    color: #fff;
    background: #111;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .listing-hero {
        min-height: 320px;
    }

    .listing-hero h1 {
        font-size: 45px;
    }

    .listing-topbar {
        align-items: flex-start;
    }

    .modern-listing-grid {
        gap: 20px;
    }

    .listing-car-image {
        height: 220px;
    }

    .listing-car-content {
        padding: 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .listing-hero {
        min-height: 300px;
    }

    .listing-hero-content {
        padding: 50px 15px;
    }

    .listing-hero h1 {
        font-size: 36px;
        line-height: 44px;
    }

    .listing-hero-content > p {
        font-size: 14px;
        line-height: 23px;
    }

    .modern-listing-page {
        padding: 55px 0 70px;
    }

    .listing-topbar {
        display: block;
        margin-bottom: 30px;
    }

    .listing-intro {
        text-align: left;
        margin-top: 18px;
    }

    .modern-listing-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .listing-car-image {
        height: 250px;
    }

    .listing-car-content {
        padding: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .listing-hero {
        min-height: 280px;
    }

    .listing-hero h1 {
        font-size: 31px;
        line-height: 38px;
    }

    .listing-hero-eyebrow {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .listing-car-image {
        height: 220px;
    }

    .listing-price-badge strong {
        font-size: 20px;
    }

    .listing-specs {
        gap: 4px;
    }

    .listing-spec {
        gap: 6px;
    }

    .listing-spec > i {
        font-size: 14px;
    }

    .listing-spec strong {
        font-size: 11px;
    }

    .listing-spec span {
        font-size: 9px;
    }

}