@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;
    }

}