@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1400px;
    }
}
.brand-section {
        background: #f8f9fb;
        padding: 60px 0;
    }

    .brand-title {
        font-weight: 700;
        font-size: 32px;
    }

    .see-all {
        font-weight: 500;
        text-decoration: none;
        color: #000;
    }

    .brand-card {
        text-align: center;
        transition: all 0.3s ease;
    }

    .brand-circle {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        
    }

    .brand-card:hover .brand-circle {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
        filter: grayscale(0%);
    }

    .brand-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
    }

    .brand-circle img {
        max-width: 75px;
        max-height: 65px;
    }
    .blog-section {
    background: #f4f4f4;
    padding: 60px 0;
}

.blog-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-img {
    position: relative;
}

.blog-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.blog-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fff;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-content {
    padding: 25px;
}

.blog-title {
    font-size: 20px;
    font-weight: 700;
    color: #1c2541;
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-desc {
    color: #777;
    font-size: 14px;
    margin-bottom: 25px;
}

.read-more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0098AB;
    padding: 12px 18px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.read-more .arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #999;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 🔥 YOUR REQUIRED CHANGE */
.read-more:hover {
    background: #0098AB;
    color: #fff;
}

.read-more:hover .arrow {
    border-color: #fff;
}
/* ===========================================
   BEST EV FOR SALE — Listing Detail Page
   =========================================== */

.listing-body {
    background: var(--bg-soft);
}

/* Always-solid white nav variant for inner pages */
.site-nav-solid {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid var(--line);
}
.site-nav-solid .nav-link { color: var(--ink-700) !important; }
.site-nav-solid .nav-link:hover,
.site-nav-solid .nav-link.active { color: var(--primary) !important; }
.site-nav-solid .brand-line-1 { color: var(--ink-900); }
.site-nav-solid .brand-line-2 { color: var(--primary); }
.site-nav-solid .navbar-toggler-icon { filter: invert(1); }
.site-nav-solid .nav-lang-toggle {
    color: var(--ink-900);
    border-color: var(--line-strong);
    background: rgba(0, 140, 157, 0.06);
}
.site-nav-solid .btn-login {
    color: var(--primary);
    border-color: var(--primary);
}
.site-nav-solid .btn-login:hover {
    background: var(--primary);
    color: #fff !important;
}

/* =================== LISTING HERO =================== */
.listing-hero {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 140, 157, 0.18) 0%, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 188, 212, 0.14) 0%, transparent 50%),
        linear-gradient(135deg, #050a14 0%, #0a1525 50%, #0f2a3d 100%);
    color: #fff;
    padding: 130px 0 60px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.listing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 140, 157, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 140, 157, 0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.listing-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}
.listing-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease;
}
.listing-breadcrumb a:hover { color: var(--primary-700); }
.listing-breadcrumb .sep { font-size: 0.7rem; opacity: 0.5; }
.listing-breadcrumb span { color: var(--primary-700); font-weight: 600; }

.listing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    margin-top: 24px;
}
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
    font-family: "Exo 2", sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    font-weight: 500;
    backdrop-filter: blur(10px);
}
.tag strong { color: #fff; font-weight: 700; margin-left: 4px; }

.listing-title {
    font-family: "Exo 2", sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    color: #fff;
}
.listing-year {
    color: var(--primary-700);
    font-family: "Orbitron", monospace;
    font-weight: 700;
    font-size: 0.6em;
    margin-left: 10px;
    vertical-align: middle;
    background: rgba(0, 188, 212, 0.12);
    padding: 4px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.listing-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
}
.listing-loc i { color: var(--primary-700); font-size: 1.2rem; }

.listing-price-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.listing-price-old {
    font-family: "Orbitron", monospace;
    font-weight: 600;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through;
    line-height: 1;
}
.listing-price {
    font-family: "Orbitron", monospace;
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    color: var(--primary-700);
    line-height: 1;
    margin-top: 6px;
    text-shadow: 0 0 28px rgba(0, 188, 212, 0.45);
}
.listing-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.action-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Exo 2", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}
.action-pill:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
}
.action-pill i { font-size: 1rem; }

@media (max-width: 991px) {
    .listing-price-wrap { align-items: flex-start; margin-top: 18px; }
    .listing-actions { justify-content: flex-start; }
}

/* =================== MAIN BODY =================== */
.listing-main {
    padding: 60px 0 80px;
}

.card-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 12px 14px;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px -12px rgba(10, 21, 37, 0.12);
}

.block-title {
    font-family: "Exo 2", sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: var(--ink-900);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid rgba(0, 140, 157, 0.12);
    position: relative;
}
.block-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}
.block-title.sm { font-size: 1.2rem; margin-bottom: 14px; padding-bottom: 10px; }
.block-body {
    color: var(--ink-500);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 14px;
}
.block-body strong { color: var(--ink-900); font-weight: 600; }
.text-primary-c { color: var(--primary) !important; }

/* =================== GALLERY =================== */
.listing-gallery { padding: 18px; overflow: hidden; }
.gallery-main {
    position: relative;
    aspect-ratio: 16/10;
    border-radius: 14px;
    overflow: hidden;
    background: #f0f4f7;
    margin-bottom: 14px;
}
.gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.gallery-main:hover img { transform: scale(1.02); }

.gallery-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(10, 21, 37, 0.85);
    color: #fff;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: "Exo 2", sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(10px);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: var(--ink-900);
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}
.gallery-nav:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}
.gallery-nav.prev { left: 14px; }
.gallery-nav.next { right: 14px; }

.gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.gallery-thumb {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gallery-thumb:hover { opacity: 1; transform: translateY(-2px); }
.gallery-thumb.is-active {
    border-color: var(--primary);
    opacity: 1;
    box-shadow: 0 8px 18px -8px var(--primary-glow);
}

@media (max-width: 575px) {
    .gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* =================== OVERVIEW GRID =================== */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.ov-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px dashed var(--line);
}
.ov-row:nth-last-child(-n+2) { border-bottom: none; }
.ov-row:nth-child(odd) { padding-right: 24px; }
.ov-row:nth-child(even) { padding-left: 24px; border-left: 1px dashed var(--line); }
.ov-key {
    color: var(--ink-500);
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.ov-key i { color: var(--primary); width: 18px; text-align: center; font-size: 1rem; }
.ov-val {
    color: var(--ink-900);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
}

@media (max-width: 575px) {
    .overview-grid { grid-template-columns: 1fr; }
    .ov-row:nth-child(odd), .ov-row:nth-child(even) { padding: 14px 0; border-left: none; }
    .ov-row { border-bottom: 1px dashed var(--line); }
    .ov-row:last-child { border-bottom: none; }
}

/* =================== FEATURES =================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.feat-cat {
    font-family: "Exo 2", sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink-900);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.feat-cat i {
    color: var(--primary);
    background: rgba(0, 140, 157, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.feat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.feat-list li {
    padding: 8px 0 8px 24px;
    color: var(--ink-700);
    font-size: 0.95rem;
    position: relative;
}
.feat-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 8px;
    color: var(--primary);
    font-weight: 800;
    font-size: 0.9rem;
}

@media (max-width: 767px) {
    .features-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* =================== LOCATION =================== */
.map-wrap {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    aspect-ratio: 16/8;
}
.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* =================== SIDEBAR =================== */
.sidebar-sticky {
    position: sticky;
    top: 110px;
}
@media (max-width: 991px) {
    .sidebar-sticky { position: static; }
}

.stats-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0;
}
.stat-cell {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.stat-cell:nth-child(2n) { border-right: none; }
.stat-cell:nth-last-child(-n+2) { border-bottom: none; }
.stat-cell i {
    color: var(--primary);
    background: rgba(0, 140, 157, 0.08);
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.stat-cell span {
    display: block;
    font-size: 0.72rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.stat-cell strong {
    display: block;
    font-family: "Orbitron", monospace;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink-900);
    margin-top: 2px;
}

/* Seller card */
.seller-card { padding: 26px; }
.seller-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.seller-head img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px rgba(0, 140, 157, 0.15);
}
.seller-role {
    font-family: "Exo 2", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(0, 140, 157, 0.1);
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 6px;
}
.seller-name {
    font-family: "Exo 2", sans-serif;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink-900);
    margin: 0 0 4px;
    line-height: 1.1;
}
.seller-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--ink-500);
}
.seller-rating i { color: #ffb300; }
.seller-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
}
.seller-meta li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    color: var(--ink-700);
    font-size: 0.92rem;
}
.seller-meta i { color: var(--primary); width: 18px; text-align: center; }

/* Test drive form */
.testdrive-card { padding: 26px; }
.td-form { display: flex; flex-direction: column; gap: 12px; }
.td-form input {
    padding: 13px 16px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    font-size: 0.95rem;
    color: var(--ink-900);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: "Inter", sans-serif;
}
.td-form input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0, 140, 157, 0.12);
}

/* =================== SIMILAR EVS =================== */
.similar-section {
    padding: 60px 0 0;
    margin-top: 30px;
    border-top: 1px solid var(--line);
}
.similar-section .section-title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* SIDEBAR */
.sidebar-sticky {
    position: sticky;
    top: 100px;
}

.filter-sidebar {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee;
}

/* MOBILE FILTER */
@media (max-width: 991px) {
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        height: 100%;
        z-index: 1055;
        overflow-y: auto;
        transition: 0.3s;
    }

    .filter-sidebar.active {
        left: 0;
    }

    .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        display: none;
        z-index: 1050;
    }

    .filter-overlay.active {
        display: block;
    }
}

/* TOP BAR */
.tag-chip {
    background: #C8E4E8;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.view-toggle i {
    font-size: 18px;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}

.view-toggle i.active {
    background: #008c9d;
    color: #fff;
}

/* LOAN */
.loan-box {
    background: #f9f9f9;
    border-radius: 12px;
}

.loan-result {
    background: #008c9d;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.accordion-body label {
    display: block;
    padding: 5px 0;
    cursor: pointer;
}

/* Accordion spacing + card look */
.accordion-item {
    border: none;
    margin-bottom: 10px; /* GAP */
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* LIGHT SHADOW */
}

/* Header styling */
.accordion-button {
    background: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 14px 16px;
}

/* Remove Bootstrap blue */
.accordion-button:not(.collapsed) {
    background: #fff;
    color: #000;
    box-shadow: none;
}

/* Body spacing */
.accordion-body {
    padding: 10px 16px 14px;
}

/* Checkbox spacing */
.accordion-body label {
    display: block;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
}
/* Base track */
.range-slider {
    position: relative;
    height: 6px;
    background: #ddd;
    border-radius: 5px;
    margin-top: 10px;
}

/* Range inputs */
.range-slider input[type="range"] {
    position: absolute;
    width: 100%;
    pointer-events: none;
    background: none;
    appearance: none;
}

/* Thumb */
.range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: all;
    width: 16px;
    height: 16px;
    background: #008c9d;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    appearance: none;
}
.range-slider {
    transition: background 0.2s ease;
}
/* Background */
.login-wrapper{
    margin-top: 50px;
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 15px;
    position:relative;
}

/* Background Image */
.login-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(205, 238, 255, 0.612), rgba(0, 0, 0, 0.289)),
    url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=1600&auto=format&fit=crop') center center/cover no-repeat;
    z-index:-2;
}

/* Glow */
.login-wrapper::after{
    content:"";
    width:500px;
    height:500px;
    background:rgba(17,213,230,.12);
    filter:blur(120px);
    border-radius:50%;
    position:absolute;
  
    z-index:-1;
}

/* Login Card */
.login-card{
    width:100%;
    max-width:460px;
    background:rgba(10,25,35,0.88);
    backdrop-filter:blur(18px);
    border:1px solid var(--border);
    border-radius:28px;
    padding:42px;
    box-shadow:0 10px 40px rgba(0,0,0,0.35);
}

/* Logo */
.logo-wrap{
    text-align:center;
    margin-bottom:30px;
}

.logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo-icon{
    width:54px;
    height:54px;
    border-radius:16px;
    background:linear-gradient(135deg,var(--primary),#32ffcf);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    color:#06141c;
    box-shadow:0 0 30px rgba(17,213,230,.45);
}

.logo-text{
    text-align:left;
}

.logo-text h3{
    margin:0;
    font-size:26px;
    font-weight:800;
    line-height:1;
    color:#fff;
}

.logo-text span{
    color:var(--primary);
}

/* Heading */
.login-title{
    text-align:center;
    margin-bottom:8px;
    font-size:34px;
    font-weight:800;
    letter-spacing:.5px;
    color: #fff;
}

.login-subtitle{
    text-align:center;
    color:#9bb8c2;
    font-size:15px;
    margin-bottom:32px;
}


/* Password eye */
.password-wrap{
    position:relative;
}

.toggle-password{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#8eaab4;
    font-size:14px;
}

/* Remember */
.form-check-label{
    color:#9fb8c1;
    font-size:14px;
}

.form-check-input{
    background-color:transparent;
    border-color:#7a96a0;
}

.form-check-input:checked{
    background-color:var(--primary);
    border-color:var(--primary);
}

/* Links */
.auth-link{
    color:var(--primary);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
}

.auth-link:hover{
    color:#fff;
}

/* Button */
.login-btn{
    height:58px;
    border:none;
    border-radius:18px;
   background:linear-gradient(135deg,#14e9fb,#0ba8b6);
    color:#fff;
    font-size:16px;
    font-weight:700;
    transition:.3s ease;
    box-shadow:0 8px 25px rgba(17,213,230,.25);
}

.login-btn:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,#14e9fb,#0ba8b6);
}

/* Divider */
.divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:28px 0;
}

.divider::before,
.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.08);
}

.divider span{
    color:#87a3ad;
    font-size:13px;
}

/* Social Buttons */
.social-btn{
    height:54px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
    color:#fff;
    font-weight:500;
    transition:.3s;
}

.social-btn:hover{
    border-color:var(--primary);
    background:rgba(17,213,230,0.08);
}

/* Bottom text */
.bottom-text{
    text-align:center;
    margin-top:24px;
    color:#96b1bb;
    font-size:14px;
}

/* Responsive */
@media(max-width:576px){

    .login-card{
        padding:28px 22px;
        border-radius:22px;
    }

    .login-title{
        font-size:28px;
    }

    .logo-text h3{
        font-size:22px;
    }

}
.btn-light{
    background: #C8E4E8;
}

.register-wrapper{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 15px;
    position:relative;
    overflow:hidden;
}

/* Background */


/* ========================= */
/* CARD */

.register-card{
    width:100%;
    background:rgba(255,255,255,.96);
    border-radius:36px;
    overflow:hidden;
    display:grid;
    grid-template-columns:650px 1fr;
}

/* ========================= */
/* LEFT */
/* RIGHT */

.register-right{
    padding:50px 45px;
}

.top-login{
    text-align:right;
    margin-bottom:20px;
    font-size:15px;
}

.top-login a{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
}

/* ========================= */

/* CHECKBOX */
.form-check-input:checked{
    background-color:var(--primary);
    border-color:var(--primary);
}

.form-check-label{
    margin-left:10px;
    font-weight:600;
    color:var(--heading);
    cursor:pointer;
}

.view-brand{
    display:none;
    margin-top:12px;
    margin-left:34px;
}

.view-brand a{
    color:var(--primary);
    font-weight:700;
    text-decoration:none;
}

/* ========================= */
/* BUTTON */

/* Button */
.register-btn{
    width: 100%;
    margin-top: 10px;
     height:58px;
    border:none;
    border-radius:18px;
   background:linear-gradient(135deg,#14e9fb,#0ba8b6);
    color:#fff;
    font-size:16px;
    font-weight:700;
    transition:.3s ease;
    box-shadow:0 8px 25px rgba(17,213,230,.25);
}

.register-btn:hover{
   transform:translateY(-2px);
    background:linear-gradient(135deg,#14e9fb,#0ba8b6);
}

/* ========================= */
/* MODAL */

.modal-content{
    border:none;
    border-radius:18px;
    overflow:hidden;
}

.modal-header{
    padding:25px 28px;
    border-bottom:1px solid #edf3f5;
}

.modal-title{
    font-size:28px;
    font-weight:800;
    color:var(--heading);
}

.modal-body{
    padding:28px;
}

.brand-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.brand-item{
    border:1px solid #e4edf1;
    border-radius:8px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#f9fcfd;
}

.brand-item label{
    font-weight:600;
    color:var(--heading);
}

/* ========================= */

@media(max-width:991px){

    .register-card{
        grid-template-columns:1fr;
    }

    .register-left{
        display:none;
    }

}

@media(max-width:767px){

    .register-right{
        padding:35px 25px;
    }

    .form-title{
        font-size:34px;
    }

    .brand-grid{
        grid-template-columns:1fr;
    }

}
/*==================================================
Best EV About Section
PART 3 - CSS (Hero + Mission)
Every class is prefixed with .bev-about
==================================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');


/*==================================================*/

.bev-about{

  
    --green-light:#EAF8F0;

    --bg:#F7FAFD;
    --white:#ffffff;

    --ink-900:#091B44;
    --ink-700:#53627B;
    --ink-600:#67748A;
    --border:#E8EEF5;

    position:relative;
    overflow:hidden;
    background:#fff;
    font-family:"Inter",sans-serif;

}


/*==================================================*/

.bev-about *,
.bev-about *:before,
.bev-about *:after{

    box-sizing:border-box;

}


/*==================================================*/

.bev-about img{

    max-width:100%;
    display:block;

}


/*==================================================*/

.bev-about section{

    position:relative;

}


/*==================================================*/

.bev-about .container{

    max-width:1320px;

}


/*==================================================*/

.bev-about p{


    font-size:16px;
    line-height:1.9;
    margin-bottom:20px;

}


/*==================================================*/

.bev-about h1,
.bev-about h2{

    font-family:"Exo 2",sans-serif;
    font-weight:800;
    color:var(--ink-900);

}


/*==================================================*/

.bev-about .bev-label{

    display:inline-flex;
    align-items:center;

    padding:8px 18px;

    border-radius:50px;

    border:1px solid #D8E5FF;

    background:#F4F8FF;

    color:#008D9E;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:30px;

}


/*==================================================*/

.bev-about .bev-title{

    font-family:"Exo 2",sans-serif;

    font-weight:800;

    font-size:clamp(2rem,4vw,3.5rem);

    line-height:1.05;

    letter-spacing:-0.02em;

    color:var(--ink-900);

    margin-bottom:30px;

}

/*==================================================
EV HIGHLIGHTS
==================================================*/

.bev-highlights{
    padding:32px 0;
    background:#ffffff;
    border-top:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;
    overflow:hidden;
}

.bev-highlights .container{
    max-width:1320px;
}

/*===================================*/

.bev-highlight-wrapper{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;

}

/*===================================*/

.bev-highlight-item{

    flex:1;

    display:flex;
    align-items:center;
    gap:18px;

    min-width:0;

}

/*===================================*/

.bev-highlight-icon{

    width:62px;
    height:62px;

    min-width:62px;

    border-radius:50%;

    background:#FBFCFE;

    border:1px solid #E6EBF3;

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

    color:#0098AB;

    font-size:28px;

    transition:.35s ease;

}

/*===================================*/

.bev-highlight-content{

    min-width:0;

}

/*===================================*/

.bev-highlight-content h4{

    margin:0 0 6px;

    font-family:"Exo 2",sans-serif;

    font-size:20px;

    font-weight:700;

    color:#0B1B45;

    line-height:1.15;

}

/*===================================*/

.bev-highlight-content p{

    margin:0;

    font-size:18px;

    line-height:1.55;

    color:#68768C;

    font-weight:500;

}

/*===================================*/
/* Hover */
/*===================================*/

.bev-highlight-item{

    transition:.35s ease;

}

.bev-highlight-item:hover{

    transform:translateY(-5px);

}

.bev-highlight-item:hover .bev-highlight-icon{

    background:#0098AB;

    border-color:#0098AB;

    color:#ffffff;

    box-shadow:0 15px 35px rgba(47,107,255,.20);

}

.bev-highlight-item:hover h4{

    color:#0098AB;

}

/*===================================*/
/* Responsive */
/*===================================*/

@media (max-width:1200px){

    .bev-highlight-wrapper{

        gap:25px;
        flex-wrap:wrap;

    }

    .bev-highlight-item{

        flex:0 0 calc(33.333% - 18px);

    }

}

@media (max-width:991px){

    .bev-highlight-item{

        flex:0 0 calc(50% - 15px);

    }

}

@media (max-width:767px){

    .bev-highlights{

        padding:25px 0;

    }

    .bev-highlight-wrapper{

        flex-direction:column;
        gap:22px;

    }

    .bev-highlight-item{

        width:100%;

    }

    .bev-highlight-icon{

        width:56px;
        height:56px;
        min-width:56px;

        font-size:24px;

    }

    .bev-highlight-content h4{

        font-size:20px;

    }

    .bev-highlight-content p{

        font-size:15px;

    }

}


/*==================================================*/

.bev-about .bev-desc{

    max-width:560px;

    margin-bottom:25px;

}


/*==================================================*/
/* HERO */
/*==================================================*/

.bev-about .bev-hero{

    padding:90px 0 75px;

    background:

    radial-gradient(circle at right top,
    rgba(63,147,255,.15),
    transparent 55%),

    linear-gradient(180deg,
    #ffffff 0%,
    #fbfdff 100%);

}


/*==================================================*/

.bev-about .bev-hero:after{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:52%;

    height:100%;

    background:

    linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.45) 20%,
    rgba(255,255,255,0) 45%);

    pointer-events:none;

}


/*==================================================*/

.bev-about .bev-hero-image{

    position:relative;

    min-height:500px;

    display:flex;

    align-items:center;

    justify-content:flex-end;

}


/*==================================================*/

.bev-about .bev-hero-image img{

    width:100%;

    border-radius:28px;
        height: 610px;
    object-fit: cover;

}


/*==================================================*/

.bev-about .bev-stat-card{

    position:absolute;

    right:20px;

    bottom:40px;

    width:170px;

    background:#fff;

    border-radius:24px;

    padding:26px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.12);

}


/*==================================================*/

.bev-about .bev-stat-card h2{

    font-size:46px;

    margin:0;

}


/*==================================================*/

.bev-about .bev-stat-card p{

    font-size:15px;

    margin:8px 0 2px;

    color:var(--ink-900);

    font-weight:700;

    line-height:1.3;

}


/*==================================================*/

.bev-about .bev-stat-card small{

    color:#77839B;

    display:block;

    margin-bottom:20px;

}


/*==================================================*/

.bev-about .bev-bars{

    display:flex;

    gap:5px;

    align-items:flex-end;

}


/*==================================================*/

.bev-about .bev-bars span{

    flex:1;

    background:#8ED89B;

    border-radius:10px;

}


.bev-about .bev-bars span:nth-child(1){

    height:10px;

}

.bev-about .bev-bars span:nth-child(2){

    height:16px;

}

.bev-about .bev-bars span:nth-child(3){

    height:23px;

}

.bev-about .bev-bars span:nth-child(4){

    height:30px;

}

.bev-about .bev-bars span:nth-child(5){

    height:38px;

}

.bev-about .bev-bars span:nth-child(6){

    height:48px;

}


/*==================================================*/
/* TRUST ITEMS */
/*==================================================*/

.bev-about .bev-trust{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}


/*==================================================*/

.bev-about .bev-trust-item{

    display:flex;

    align-items:center;

    gap:14px;

}


/*==================================================*/

.bev-about .bev-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF4FF;

    color:#2F6BFF;

    font-size:20px;

}


.bev-about .bev-icon.green{

    background:#EDF9F0;

    color:#2AB65F;

}


.bev-about .bev-icon.dark{

    background:#F3F5FA;

    color:#4E5E78;

}


/*==================================================*/

.bev-about .bev-trust-item h6{

    margin:0;

    color:var(--ink-900);

    font-size:15px;

    font-weight:700;

}


.bev-about .bev-trust-item small{

    color:#78869A;

    font-size:13px;

}


/*==================================================*/
/* MISSION */
/*==================================================*/

.bev-about .bev-mission{

    padding:85px 0;

    background:#FCFDFF;

}


/*==================================================*/

.bev-about .bev-small-title{

    display:block;

    margin-bottom:18px;

    color:#687791;

    font-size:12px;

    font-weight:700;

    letter-spacing:3px;

}


/*==================================================*/

.bev-about .bev-section-title{

    font-family:"Exo 2",sans-serif;

    font-weight:800;

    font-size:52px;

    line-height:1.1;

    margin-bottom:28px;

}


.bev-about .bev-section-title span{

    color:#008D9E;

}


/*==================================================*/

.bev-about .bev-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 28px;

    border-radius:14px;

    text-decoration:none;

    background:#2F6BFF;

    color:#fff;

    font-weight:700;

    transition:.35s;

}


.bev-about .bev-btn:hover{

    background:#1D55E8;

    color:#fff;

    transform:translateY(-3px);

}


/*==================================================*/
/* FEATURE CARDS */
/*==================================================*/

.bev-about .bev-feature-card{

    height:100%;

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#fff;

    padding:34px;

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

    border-radius:22px;

    transition:.35s;

    box-shadow:0 8px 25px rgba(11,43,85,.04);

}


.bev-about .bev-feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(20,56,120,.10);

}


/*==================================================*/

.bev-about .bev-feature-icon{

    width:58px;

    height:58px;

    flex:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF4FF;

    color:#2F6BFF;

    font-size:24px;

}


.bev-about .bev-feature-icon.blue{

    background:#EEF4FF;

    color:#2F6BFF;

}

.bev-about .bev-feature-icon.green{

    background:#EDF9F0;

    color:#32BF65;

}

.bev-about .bev-feature-icon.leaf{

    background:#EEF9F2;

    color:#41C877;

}


/*==================================================*/

.bev-about .bev-feature-card h5{

    font-family:"Exo 2",sans-serif;

    font-weight:700;

    color:var(--ink-900);

    margin-bottom:12px;

}


.bev-about .bev-feature-card p{

    margin:0;

    font-size:15px;

    line-height:1.8;

}
/*==================================================
PART 4
How It Works + Values + Video + Responsive
==================================================*/


/*==================================================
HOW IT WORKS
==================================================*/

.bev-about .bev-how{

    padding:70px 0 85px;
    background:#fff;

}

.bev-about .bev-divider{

    width:100%;
    height:1px;
    background:#E8EEF5;
    margin-bottom:35px;

}


/*==================================================*/

.bev-about .bev-step{

    display:flex;
    align-items:center;
    gap:18px;

}


/*==================================================*/

.bev-about .bev-step-icon{

    width:76px;
    height:76px;

    border-radius:50%;

    background:#fff;

    border:1px solid #E9EEF6;

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

    font-size:30px;

    color:#008D9E;

    flex:none;

    box-shadow:0 10px 30px rgba(10,40,90,.05);

    transition:.35s;

}

.bev-about .bev-step:hover .bev-step-icon{

    transform:translateY(-6px);

    background:#008D9E;

    color:#fff;

}


/*==================================================*/

.bev-about .bev-step-content h5{

    margin-bottom:10px;

    font-family:"Exo 2",sans-serif;

    font-size:18px;

    font-weight:700;

    color:var(--ink-900);

}

.bev-about .bev-step-content p{

    margin:0;

    font-size:15px;

    line-height:1.7;

}


/*==================================================*/

.bev-about .bev-arrow{

    width:40px;

    text-align:center;

    color:#8EA4C3;

    font-size:20px;

}



/*==================================================
VALUES SECTION
==================================================*/

.bev-about .bev-values{

    position:relative;

    overflow:hidden;

    background:#F7FAFD;

    padding:90px 0 100px;

}


/* Decorative Wave */

.bev-about .bev-values:before{

    content:"";

    position:absolute;

    left:-10%;

    bottom:-180px;

    width:120%;

    height:320px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(71,148,255,.08),
    transparent 70%);

}


/*==================================================*/

.bev-about .bev-value-card{

    text-align:center;

    height:100%;

    padding:28px 15px;

    border-radius:20px;

    background:#fff;

    border:1px solid #E8EEF5;

    transition:.35s;

    box-shadow:0 8px 25px rgba(11,43,85,.04);

}


.bev-about .bev-value-card:hover{

    transform:translateY(-8px);

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

}


/*==================================================*/

.bev-about .bev-value-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    margin:auto auto 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF4FF;

    color:#2F6BFF;

    font-size:28px;

}


.bev-about .bev-value-icon.green{

    background:#EDF9F0;

    color:#2EB95F;

}

.bev-about .bev-value-icon.blue{

    background:#EEF4FF;

    color:#2F6BFF;

}

.bev-about .bev-value-icon.leaf{

    background:#EFFAF3;

    color:#39C26A;

}


/*==================================================*/

.bev-about .bev-value-card h6{

    font-family:"Exo 2",sans-serif;

    font-weight:700;

    color:var(--ink-900);

    margin-bottom:12px;

}

.bev-about .bev-value-card p{

    font-size:14px;

    margin:0;

    line-height:1.8;

}



/*==================================================
VIDEO CARD
==================================================*/

.bev-about .bev-video-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    box-shadow:

    0 25px 60px rgba(18,45,92,.18);

}


.bev-about .bev-video-card img{

    width:100%;

    transition:.7s;

}


.bev-about .bev-video-card:hover img{

    transform:scale(1.08);

}


/*==================================================*/

.bev-about .bev-video-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(to top,

    rgba(5,18,45,.72),

    rgba(5,18,45,.15),

    rgba(5,18,45,0));

}


/*==================================================*/

.bev-about .bev-play-btn{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:86px;

    height:86px;

    border-radius:50%;

    background:rgba(255,255,255,.20);

    backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-size:40px;

    transition:.35s;

}


.bev-about .bev-play-btn:hover{

    background:#2F6BFF;

    color:#fff;

    transform:translate(-50%,-50%) scale(1.08);

}


/*==================================================*/

.bev-about .bev-video-content{

    position:absolute;

    left:35px;

    bottom:30px;

    color:#fff;

}


.bev-about .bev-video-content h3{

    font-family:"Exo 2",sans-serif;

    font-weight:700;

    margin-bottom:8px;

}


.bev-about .bev-video-content p{

    margin:0;

    color:#fff;

}



/*==================================================
TRANSITIONS
==================================================*/

.bev-about a,
.bev-about button,
.bev-about img,
.bev-about .bev-feature-card,
.bev-about .bev-value-card{

    transition:.35s ease;

}



/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1199px){

.bev-about .bev-section-title{

    font-size:42px;

}

}



@media (max-width:991px){

.bev-about .bev-hero{

    padding:70px 0;

}

.bev-about .bev-title{

    font-size:48px;

}

.bev-about .bev-hero-image{

    min-height:auto;

}

.bev-about .bev-stat-card{

    right:15px;

    bottom:15px;

}

.bev-about .bev-section-title{

    font-size:38px;

}

.bev-about .bev-step{

    margin-bottom:35px;

}

}



@media (max-width:767px){

.bev-about .bev-title{

    font-size:38px;

}

.bev-about .bev-section-title{

    font-size:32px;

}

.bev-about .bev-trust{

    gap:20px;

}

.bev-about .bev-feature-card{

    padding:25px;

}

.bev-about .bev-stat-card{

    position:relative;

    width:100%;

    margin-top:20px;

    right:auto;

    bottom:auto;

}

.bev-about .bev-play-btn{

    width:70px;

    height:70px;

    font-size:32px;

}

.bev-about .bev-video-content{

    left:20px;

    bottom:18px;

}

}



@media (max-width:575px){

.bev-about .bev-hero{

    padding:55px 0;

}

.bev-about .bev-title{

    font-size:34px;

}

.bev-about .bev-label{

    font-size:11px;

    padding:7px 16px;

}

.bev-about .bev-feature-card{

    flex-direction:column;

}

.bev-about .bev-trust-item{

    width:100%;

}

.bev-about .bev-step{

    flex-direction:column;

    text-align:center;

}

.bev-about .bev-step-icon{

    margin:auto;

}

.bev-about .bev-value-card{

    padding:22px 15px;

}

}




.bev-about .bev-value-card{

    position:relative;

    overflow:hidden;

}

.bev-about .bev-value-card::before{

    content:"";

    position:absolute;

    top:-80px;

    right:-80px;

    width:160px;

    height:160px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(47,107,255,.05),

    transparent);

}

.bev-about .bev-value-card:hover .bev-value-icon{

    transform:translateY(-4px) rotate(-8deg);

}

.bev-about .bev-value-icon{

    transition:.35s;

}



/*=========================================================
VIDEO PREMIUM
=========================================================*/

.bev-about .bev-video-card{

    background:#000;

}

.bev-about .bev-video-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.08),

    transparent 45%);

    z-index:2;

}

.bev-about .bev-video-card::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.20),

    transparent);

    filter:blur(10px);

}



/*=========================================================
PLAY BUTTON RIPPLE
=========================================================*/

.bev-about .bev-play-btn{

    overflow:hidden;

}

.bev-about .bev-play-btn::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.6);

    animation:bevRipple 2.2s infinite;

}

@keyframes bevRipple{

0%{

transform:scale(.8);

opacity:1;

}

100%{

transform:scale(1.8);

opacity:0;

}

}



/*=========================================================
BUTTON PREMIUM
=========================================================*/

.bev-about .bev-btn{

    position:relative;

    overflow:hidden;

}

.bev-about .bev-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent);

    transition:.8s;

}

.bev-about .bev-btn:hover::before{

    left:140%;

}



/*=========================================================
SOFT SECTION DIVIDERS
=========================================================*/

.bev-about .bev-mission{

    position:relative;

}

.bev-about .bev-mission::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

    90deg,

    transparent,

    #E6EDF7,

    transparent);

}



/*=========================================================
SMOOTH SCROLL FEEL
=========================================================*/

.bev-about *{

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

}



/*=========================================================
PREMIUM HOVER
=========================================================*/

.bev-about .bev-feature-card,
.bev-about .bev-value-card,
.bev-about .bev-video-card,
.bev-about .bev-step-icon,
.bev-about .bev-stat-card{

    will-change:transform;

}



/*=========================================================
SHADOW SYSTEM
=========================================================*/

.bev-about{

--shadow-xs:0 4px 10px rgba(0,0,0,.04);
--shadow-sm:0 10px 25px rgba(0,0,0,.06);
--shadow-md:0 18px 40px rgba(0,0,0,.08);
--shadow-lg:0 30px 70px rgba(0,0,0,.12);

}

/* ── How It Works Page ── */

/* HERO */
.hiw-hero {
    position: relative;
    min-height: 55vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.hiw-hero video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hiw-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.88) 0%, rgba(0,18,30,0.78) 60%, rgba(0,168,224,0.06) 100%);
    z-index: 1;
}
.hiw-hero-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(0,200,150,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,200,150,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
}
.hiw-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 130px 0 90px;
    text-align: center;
}
.hiw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,200,150,0.1);
    border: 1px solid rgba(0,200,150,0.28);
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #00c896;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.hiw-eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00c896;
    animation: blink 2s infinite;
}
@keyframes blink {
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:.45;transform:scale(1.4);}
}
.hiw-hero-title {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.12;
    margin-bottom: 18px;
}
.hiw-hero-sub {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: rgba(255,255,255,0.55);
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

/*=========================================================
 BEST EV CASH OFFER
 HERO SECTION CSS
 Prefix : bevco-
 Primary : #0A7C8C
=========================================================*/

.bevco-hero-section{
    position:relative;
    padding:90px 0;
    background:#ffffff;
    overflow:hidden;
}

.bevco-hero-section::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:42%;
    height:100%;
    background:linear-gradient(90deg,
        rgba(10,124,140,.05),
        rgba(10,124,140,0));
    pointer-events:none;
}

.bevco-left-content{
    position:relative;
    z-index:2;
}

/*-----------------------------------
LABEL
------------------------------------*/

.bevco-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 22px;
    border:1px solid rgba(10,124,140,.35);
    border-radius:100px;
    font-size:13px;
    letter-spacing:4px;
    font-weight:700;
    color:#0A7C8C;
    text-transform:uppercase;
    margin-bottom:28px;
}

/*-----------------------------------
TITLE
------------------------------------*/

.bevco-title{
    font-size:72px;
    line-height:1.02;
    font-weight:900;
    color:#07162D;
    margin-bottom:28px;
    letter-spacing:-2px;
}

.bevco-title span{
    color:#0A7C8C;
}

/*-----------------------------------
DESCRIPTION
------------------------------------*/

.bevco-description{
    font-size:20px;
    line-height:1.9;
    color:#5B677A;
    margin-bottom:42px;
    max-width:620px;
}

/*-----------------------------------
FEATURES
------------------------------------*/

.bevco-feature-list{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:45px;
}

.bevco-feature-item{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid #ECECEC;
    transition:.35s;
}

.bevco-feature-item:hover{
    padding-left:12px;
}

.bevco-feature-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    background:#EEF8F9;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.bevco-feature-icon i{
    color:#0A7C8C;
    font-size:20px;
}

.bevco-feature-text{
    font-size:18px;
    color:#263245;
    font-weight:500;
}

/*-----------------------------------
BUTTONS
------------------------------------*/

.bevco-btn-group{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.bevco-btn-primary{
    height:62px;
    padding:0 34px;
    border-radius:16px;
    background:#0A7C8C;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    font-size:17px;
    font-weight:700;
    transition:.35s;
    box-shadow:0 18px 35px rgba(10,124,140,.25);
}

.bevco-btn-primary:hover{
    color:#fff;
    transform:translateY(-4px);
    background:#086c79;
}

.bevco-btn-outline{
    height:62px;
    padding:0 34px;
    border:2px solid #0A7C8C;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#0A7C8C;
    text-decoration:none;
    font-size:17px;
    font-weight:700;
    transition:.35s;
}

.bevco-btn-outline:hover{
    background:#0A7C8C;
    color:#fff;
    transform:translateY(-4px);
}

/*======================================================
RIGHT IMAGE
======================================================*/

.bevco-image-wrapper{
    position:relative;
    padding-left:35px;
}

.bevco-main-image{
    position:relative;
    overflow:hidden;
    border-radius:60px 22px 22px 60px;
    box-shadow:0 40px 70px rgba(0,0,0,.10);
}

.bevco-main-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        rgba(255,255,255,.95),
        rgba(255,255,255,.15),
        transparent);
}

.bevco-main-image img{
    width:100%;
    display:block;
    height:760px;
    object-fit:cover;
    transition:1.2s;
}

.bevco-main-image:hover img{
    transform:scale(1.05);
}

/*==================================================
OFFER CARD
==================================================*/

.bevco-offer-card{
    position:absolute;
    bottom:135px;
    left:20px;
    width:430px;
    background:#fff;
    border-radius:22px;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px;
    z-index:5;
}

.bevco-offer-label{
    display:block;
    font-size:12px;
    letter-spacing:2px;
    font-weight:700;
    color:#5D6A7D;
    margin-bottom:12px;
}

.bevco-offer-left h3{
    font-size:52px;
    font-weight:900;
    color:#0A7C8C;
    margin-bottom:10px;
    line-height:1;
}

.bevco-offer-left small{
    font-size:16px;
    color:#66748A;
}

.bevco-offer-right{
    position:relative;
}

.bevco-chart{
    opacity:.9;
}

.bevco-price-tag{
    position:absolute;
    right:0;
    top:-10px;
    background:#0A7C8C;
    color:#fff;
    padding:8px 14px;
    border-radius:10px;
    font-size:14px;
    font-weight:700;
}

/*==================================================
BOTTOM STATS
==================================================*/

.bevco-bottom-stats{
    position:absolute;
    bottom:-28px;
    right:0;
    left:120px;
    background:linear-gradient(90deg,#0A7C8C,#075B66);
    border-radius:22px;
    display:flex;
    justify-content:space-around;
    padding:28px 30px;
    box-shadow:0 25px 60px rgba(10,124,140,.35);
}

.bevco-stat{
    display:flex;
    align-items:center;
    gap:14px;
}

.bevco-stat i{
    width:50px;
    height:50px;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
}

.bevco-stat strong{
    display:block;
    color:#fff;
    font-size:28px;
    line-height:1;
    font-weight:800;
}

.bevco-stat span{
    color:rgba(255,255,255,.82);
    font-size:14px;
}

/*==================================================
ANIMATIONS
==================================================*/

.bevco-offer-card{
    animation:bevcoFloat 5s ease-in-out infinite;
}

@keyframes bevcoFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

.bevco-bottom-stats{
    animation:bevcoRise .9s ease;
}

@keyframes bevcoRise{

    from{
        transform:translateY(40px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}
/*==========================================================
    RESPONSIVE CSS
    BEST EV CASH OFFER
==========================================================*/


/*==========================================================
    Large Desktop
==========================================================*/

@media (max-width:1600px){

    .bevco-title{
        font-size:64px;
    }

    .bevco-main-image img{
        height:700px;
    }

    .bevco-offer-card{
        width:400px;
    }

}



/*==========================================================
    Laptop
==========================================================*/

@media (max-width:1400px){

    .bevco-hero-section{
        padding:80px 0;
    }

    .bevco-title{
        font-size:56px;
    }

    .bevco-description{
        font-size:18px;
        line-height:1.8;
    }

    .bevco-main-image img{
        height:650px;
    }

    .bevco-offer-card{

        width:370px;

        padding:24px;

        left:15px;

        bottom:120px;

    }

    .bevco-offer-left h3{

        font-size:46px;

    }

    .bevco-bottom-stats{

        left:70px;

        padding:24px;

    }

}



/*==========================================================
    Bootstrap XL
==========================================================*/

@media (max-width:1199px){

    .bevco-title{

        font-size:50px;

    }

    .bevco-description{

        font-size:17px;

    }

    .bevco-main-image img{

        height:620px;

    }

    .bevco-offer-card{

        width:340px;

        padding:22px;

    }

    .bevco-offer-left h3{

        font-size:40px;

    }

    .bevco-bottom-stats{

        left:40px;

        right:0;

    }

    .bevco-stat strong{

        font-size:22px;

    }

}



/*==========================================================
    Tablet
==========================================================*/

@media (max-width:991px){

    .bevco-hero-section{

        padding:70px 0 120px;

    }

    .bevco-left-content{

        margin-bottom:60px;

    }

    .bevco-title{

        font-size:48px;

        line-height:1.1;

    }

    .bevco-description{

        max-width:100%;

    }

    .bevco-image-wrapper{

        padding-left:0;

    }

    .bevco-main-image{

        border-radius:35px;

    }

    .bevco-main-image img{

        height:580px;

    }

    .bevco-offer-card{

        width:360px;

        bottom:120px;

        left:20px;

    }

    .bevco-bottom-stats{

        position:absolute;

        left:20px;

        right:20px;

        bottom:-35px;

    }

}



/*==========================================================
    Mobile Landscape
==========================================================*/

@media (max-width:767px){

    .bevco-hero-section{

        padding:60px 0 100px;

    }

    .bevco-label{

        font-size:11px;

        letter-spacing:2px;

        padding:10px 18px;

    }

    .bevco-title{

        font-size:40px;

    }

    .bevco-description{

        font-size:16px;

        margin-bottom:35px;

    }

    .bevco-feature-item{

        gap:14px;

        padding:16px 0;

    }

    .bevco-feature-icon{

        width:42px;

        height:42px;

    }

    .bevco-feature-text{

        font-size:16px;

    }

    .bevco-btn-group{

        flex-direction:column;

        width:100%;

    }

    .bevco-btn-primary,

    .bevco-btn-outline{

        width:100%;

        justify-content:center;

    }

    .bevco-main-image{

        border-radius:28px;

    }

    .bevco-main-image img{

        height:470px;

    }

    .bevco-offer-card{

        position:absolute;

        width:92%;

        left:4%;

        right:4%;

        bottom:105px;

        padding:20px;

    }

    .bevco-offer-left h3{

        font-size:36px;

    }

    .bevco-offer-left small{

        font-size:14px;

    }

    .bevco-chart{

        display:none;

    }

    .bevco-price-tag{

        position:relative;

        top:auto;

        right:auto;

        display:inline-block;

        margin-top:10px;

    }

    .bevco-bottom-stats{

        position:relative;

        left:auto;

        right:auto;

        bottom:auto;

        margin-top:25px;

        flex-direction:column;

        gap:20px;

        border-radius:20px;

    }

    .bevco-stat{

        justify-content:flex-start;

    }

}



/*==========================================================
    Small Mobile
==========================================================*/

@media (max-width:575px){

    .bevco-hero-section{

        padding:50px 0 80px;

    }

    .bevco-title{

        font-size:34px;

        letter-spacing:-1px;

    }

    .bevco-description{

        font-size:15px;

        line-height:1.8;

    }

    .bevco-feature-text{

        font-size:15px;

    }

    .bevco-main-image{

        border-radius:22px;

    }

    .bevco-main-image img{

        height:380px;

    }

    .bevco-offer-card{

        width:94%;

        left:3%;

        right:3%;

        padding:18px;

        border-radius:18px;

    }

    .bevco-offer-left h3{

        font-size:30px;

    }

    .bevco-offer-label{

        font-size:10px;

    }

    .bevco-bottom-stats{

        padding:18px;

        gap:18px;

    }

    .bevco-stat{

        gap:12px;

    }

    .bevco-stat i{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .bevco-stat strong{

        font-size:20px;

    }

    .bevco-stat span{

        font-size:13px;

    }

}



/*==========================================================
    Extra Small Devices
==========================================================*/

@media (max-width:380px){

    .bevco-title{

        font-size:30px;

    }

    .bevco-description{

        font-size:14px;

    }

    .bevco-feature-item{

        align-items:flex-start;

    }

    .bevco-feature-icon{

        width:38px;

        height:38px;

    }

    .bevco-feature-text{

        font-size:14px;

    }

    .bevco-btn-primary,

    .bevco-btn-outline{

        height:56px;

        font-size:15px;

        padding:0 18px;

    }

    .bevco-main-image img{

        height:340px;

    }

    .bevco-offer-card{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .bevco-offer-right{

        width:100%;

    }

    .bevco-price-tag{

        width:100%;

        text-align:center;

    }

}

@media (max-width: 420px) {

.site-nav-solid .nav-link{
color:#fff !important}
}