@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700;1,800&display=swap');
:root{--bg:#050607;--panel:#0b0d0f;--line:#202329;--text:#f5f6f7;--muted:#a9adb3;--red:#df0712;--blue:#0075c9;--max:1440px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.55 Montserrat,Arial,sans-serif}a{text-decoration:none;color:inherit}.wrap{max-width:var(--max);margin:auto;padding:0 42px}.header{height:124px;border-bottom:1px solid #191b1e;display:flex;align-items:center;justify-content:space-between}.logo{width:230px}.menu{display:flex;align-items:center;gap:28px;font-size:11px;font-weight:700}.menu a:first-child{position:relative}.menu a:first-child:after{content:"";position:absolute;left:0;bottom:-16px;width:37px;height:3px;background:var(--red)}.estimate,.outline,.button{padding:12px 20px;border:1px solid #777;font:700 10px Montserrat;text-transform:uppercase}.hero{min-height:435px;position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(90deg,#060708 0%,#090a0cd9 38%,#08090a25 75%,#060708 100%),url('https://images.unsplash.com/photo-1555215695-3004980ad54e?auto=format&fit=crop&w=1900&q=90') center/cover}.hero:after{content:"";position:absolute;right:-40px;top:0;width:190px;height:100%;background:linear-gradient(110deg,transparent 25%,#00549c 26% 40%,transparent 41% 52%,#be0712 53% 67%,transparent 68%)}.hero-copy{position:relative;z-index:1;width:52%}.hero h1{font-size:34px;line-height:1.12;letter-spacing:-1px;font-style:italic;text-transform:uppercase;margin:0 0 22px;font-weight:800}.hero h1 b{color:#ec101a}.hero p{font-size:15px;max-width:410px;margin:0 0 28px}.button{background:var(--red);border-color:var(--red);display:inline-block;margin-right:10px}.outline{display:inline-block}.features{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line);background:#060708}.feature{display:flex;align-items:center;gap:15px;padding:19px 12px;border-right:1px solid var(--line)}.feature i{font-style:normal;color:#00a1ff;font-size:23px}.feature b{font-size:11px;display:block;text-transform:uppercase}.feature span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase}.grid{display:grid;grid-template-columns:3fr 1.1fr;gap:17px;padding:19px 0}.box{background:linear-gradient(135deg,#0d0f12,#070809);border:1px solid var(--line);padding:19px}.box h2,.stock-head h2{font-size:17px;text-transform:uppercase;margin:0 0 19px}.search-row{padding:14px 12px 7px;background:#eceef0;border-radius:3px;display:grid;grid-template-columns:repeat(5,1fr) 105px;gap:10px}.search-row label{font-size:9px;color:#111;font-weight:700}.search-row select{display:block;width:100%;margin-top:4px;background:#fff;border:1px solid #bbb;border-radius:3px;padding:8px 5px;font-size:10px}.search-row button{align-self:end;padding:10px 4px;border:0;color:#fff;background:var(--red);font:700 9px Montserrat}.deposit{position:relative;overflow:hidden;min-height:145px;background:linear-gradient(90deg,#0b0d10 50%,transparent),url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80') center/cover}.deposit p{max-width:185px;font-size:11px;margin:0 0 15px}.mini-btn{font:700 9px Montserrat;border:1px solid #777;padding:8px 10px;display:inline-block}.stock{border:1px solid var(--line);padding:18px;margin-bottom:20px}.stock-head{display:flex;justify-content:space-between;align-items:center}.stock-head h2{margin:0}.stock-head a{font-size:9px;color:#ddd}.vehicles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.vehicle{background:#111317;border:1px solid #292c31;overflow:hidden}.vehicle img{width:100%;height:120px;object-fit:cover}.vehicle-info{padding:10px}.badge{position:absolute;margin:8px;background:#0062b7;color:#fff;padding:4px 5px;font:700 8px Montserrat}.badge.red{background:var(--red)}.vehicle h3{font-size:12px;margin:3px 0}.vehicle p{font-size:9px;color:#c0c3c7;margin:0 0 7px}.price{font-size:15px;font-weight:700}.service-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;padding-bottom:25px}.service{border:1px solid var(--line);padding:20px;display:flex;gap:15px;align-items:flex-start}.service i{color:#fff;border:1px solid #777;border-radius:50%;width:38px;height:38px;text-align:center;padding-top:8px;font-style:normal}.service h3{font-size:12px;margin:0 0 6px}.service p{font-size:10px;color:var(--muted);margin:0}.footer{border-top:1px solid var(--line);padding:28px 0;background:#070809}.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;align-items:center;gap:30px}.footer .logo{width:210px}.footer p{font-size:10px;color:#ddd}.footer b{font-size:10px;text-transform:uppercase}.footer span{display:block;font-size:10px;color:var(--muted)}@media(max-width:900px){.menu{gap:12px}.grid{grid-template-columns:1fr}.vehicles{grid-template-columns:repeat(3,1fr)}.features{grid-template-columns:repeat(3,1fr)}.service-strip{grid-template-columns:1fr 1fr}.header{height:90px}.logo{width:190px}}@media(max-width:600px){.wrap{padding:0 18px}.menu{display:none}.hero{min-height:440px}.hero-copy{width:100%}.hero h1{font-size:29px}.features,.vehicles,.service-strip,.footer-inner{grid-template-columns:1fr 1fr}.feature{padding:13px 5px}.search-row{grid-template-columns:1fr 1fr}.footer-inner{gap:15px}.footer-inner>div:first-child{grid-column:span 2}.vehicle img{height:105px}}

/* =========================================================
   HEADER ACTIONS
   ========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

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

    height: 38px;
    padding: 0 18px;

    background: rgba(0, 171, 177, 0.1);

    border: 1px solid rgba(0, 3, 177, 0.45);
    border-radius: 5px;

    color: #68b9e5;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;

    text-decoration: none;

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

/* =========================================================
   LOGIN
   ========================================================= */

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

    height: 38px;
    padding: 0 18px;

    background: rgba(0, 108, 177, .10);

    border: 1px solid rgba(0, 108, 177, .45);
    border-radius: 5px;

    color: #68b9e5;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;

    text-decoration: none;

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

.login-button:hover {
    background: var(--blue);

    border-color: var(--blue);

    color: #fff;

    transform: translateY(-1px);
}


/* =========================================================
   USER MENU
   ========================================================= */

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   USER INFO
   ========================================================= */

.user-info {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 0 10px;

    height: 38px;

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

    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 5px;
}

.user-status {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #48a9d8;

    box-shadow:
        0 0 7px rgba(72, 169, 216, .65);
}

.user-name {
    max-width: 130px;

    overflow: hidden;

    color: #d9dde2;

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

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   ADMIN
   ========================================================= */

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

    height: 36px;
    padding: 0 12px;

    background: rgba(0, 108, 177, .08);

    border: 1px solid rgba(0, 108, 177, .25);
    border-radius: 5px;

    color: #54aedd;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .7px;

    text-decoration: none;

    transition: .2s ease;
}

.header-admin:hover {
    background: var(--blue);

    border-color: var(--blue);

    color: #fff;
}


/* =========================================================
   LOGOUT
   ========================================================= */

.logout-form {
    margin: 0;
}

.logout-button {
    height: 36px;
    padding: 0 11px;

    background: transparent;

    border: 1px solid rgba(225, 102, 0, .25);
    border-radius: 5px;

    color: #b8784e;

    font-family: inherit;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .5px;

    cursor: pointer;

    transition: .2s ease;
}

.logout-button:hover {
    background: rgba(225, 102, 0, .10);

    border-color: var(--red);

    color: #e9945d;
}