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

.hero{
    position:relative;
    padding:20px 0 12px;
    overflow:hidden;
}

.hero-box{

    position:relative;

    display:grid;
    grid-template-columns:1.15fr .85fr;

    align-items:center;
    gap:40px;

    min-height:360px;

    padding:38px 48px;

    border-radius:28px;

    overflow:hidden;

    background:#111;

}

/* ==========================================================
   BACKGROUND
========================================================== */

.hero-box::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at top right,
            rgba(0,120,255,.18),
            transparent 45%
        ),

        linear-gradient(
            rgba(10,10,10,.68),
            rgba(10,10,10,.78)
        ),

        url("../images/bmw-background.webp") center center / cover no-repeat;

    z-index:0;

}

.hero-box::after{

    content:"";

    position:absolute;

    right:-120px;
    top:-120px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(0,123,255,.08);

    filter:blur(90px);

    z-index:1;

    pointer-events:none;

}

/* ==========================================================
   CONTENT
========================================================== */

.hero-content,
.hero-image,
.hero-features{

    position:relative;
    z-index:2;

}

/* ==========================================================
   Content
========================================================== */

.hero-content{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


/* ==========================================================
   Badge
========================================================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;

    font-weight:600;

    letter-spacing:.3px;

}

.hero-badge i{

    color:#1f8cff;

    font-size:14px;

}


/* ==========================================================
   Title
========================================================== */

.hero-title{
	
	font-family: "BPG Nino Mtavruli", sans-serif;

    margin:0;

    color:#fff;

    font-size:52px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1px;

}

.hero-title span{

    color:#1f8cff;

}

.hero-text
 {
	font-family: "BPG Sans", sans-serif; 
	
}


/* ==========================================================
   Description
========================================================== */

.hero-description{
	

    max-width:560px;

    margin-top:18px;

    color:rgba(255,255,255,.78);

    font-size:17px;

    line-height:1.75;

}

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

.hero-image{
    position:relative;
    z-index:2;

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

.hero-image img{
    width:100%;
    max-width:560px;
    height:auto;
    display:block;

    user-select:none;
    pointer-events:none;

    filter:
        drop-shadow(0 30px 50px rgba(0,0,0,.45));
}


/* ==========================================================
   FLOATING FEATURES
========================================================== */

.hero-features{
	
	font-family: "BPG Sans", sans-serif;
    position:absolute;

    right:20px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    gap:14px;

    z-index:5;
}

.hero-feature{

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

    min-width:210px;

    padding:14px 18px;

    border-radius:18px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.25s ease;

}

.hero-feature:hover{

    transform:translateX(-6px);

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

}

.hero-feature i{

    width:46px;
    height:46px;

    border-radius:50%;

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

    font-size:18px;

    background:#1f8cff;
    color:#fff;

    flex-shrink:0;

}

.hero-feature h4{

    margin:0 0 3px;

    color:#fff;

    font-size:15px;

    font-weight:700;

}

.hero-feature p{

    margin:0;

    color:rgba(255,255,255,.70);

    font-size:13px;

}

/* ==========================================================
   FREE VIN SEARCH
========================================================== */

.vin-search{

    position:relative;

    margin:18px 0 22px;

}

.vin-box{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    gap:22px;

    padding:24px 28px;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        #1c222c 0%,
        #161b24 100%
    );

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

}

.vin-box::before{

    content:"";

    position:absolute;

    top:-120px;
    right:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:rgba(0,120,255,.08);

    filter:blur(80px);

    pointer-events:none;

}

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

.vin-info{
	
	font-family: "BPG Nino Mtavruli", sans-serif;

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:10px;

}

.vin-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(37,99,235,.12);

    border:1px solid rgba(37,99,235,.22);

    color:#4ea2ff;

    font-size:13px;

    font-weight:700;

}

.vin-badge i{

    font-size:13px;

}

.vin-info h2{

    margin:0;

    color:#fff;

    font-size:34px;

    font-weight:800;

    line-height:1.2;

}

.vin-info h2 span{

    color:#2f8dff;

}

.vin-info p{

    margin:0;

    max-width:760px;

    color:#a8b2c2;

    font-size:15px;

    line-height:1.7;

}

/* ==========================================================
   FEATURES
========================================================== */

.vin-features{

    display:flex;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

}

.vin-features span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#cdd5e0;

    font-size:14px;

    font-weight:500;

}

.vin-features i{

    color:#2f8dff;

    font-size:14px;

}

/* ==========================================================
   VIN FORM
========================================================== */

.vin-form{

    display:flex;

    align-items:center;
	
	font-family: "BPG Sans", sans-serif;

    gap:14px;

    width:100%;

    flex-wrap:nowrap;

}

.vin-input{

    position:relative;

    flex:1;

    min-width:0;

}

.vin-input i{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    color:#2f8dff;

    font-size:18px;

    z-index:2;

}

.vin-input input{

    width:100%;

    height:58px;

    padding:0 22px 0 56px;

    border:none;

    outline:none;

    border-radius:16px;

    background:#fff;

    color:#111;

    font-size:16px;

    font-weight:500;

    transition:.25s;

}

.vin-input input::placeholder{

    color:#8b93a0;

}

.vin-input input:focus{

    box-shadow:
        0 0 0 3px rgba(47,141,255,.22);

}

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

.vin-form button{

    height:58px;

    padding:0 28px;

    border:none;

    border-radius:16px;

    background:#2f8dff;

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    white-space:nowrap;

    flex-shrink:0;

    transition:.25s;

}

.vin-form button:hover{

    background:#1977f3;

    transform:translateY(-2px);

}

.vin-form button:active{

    transform:scale(.98);

}

.vin-form button i{

    font-size:17px;

}

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

@media (max-width:768px){

    .vin-form{

        gap:8px;

        flex-wrap:nowrap;

    }

    .vin-input input{

        height:46px;

        padding-left:44px;

        font-size:14px;

    }

    .vin-input i{

        left:14px;

        font-size:15px;

    }

    .vin-form button{

        height:46px;

        padding:0 14px;

        font-size:13px;

    }

}

@media (max-width:480px){

    .vin-form button span{

        display:none;

    }

    .vin-form button{

        width:46px;

        padding:0;

        border-radius:14px;

    }

    .vin-form button i{

        margin:0;

        font-size:16px;

    }

}
/* ==========================================================
   COMPACT VIN SECTION
========================================================== */

.vin-search{
    margin-top:16px;
    margin-bottom:20px;
}

.vin-box{

    padding:18px 24px;

    border-radius:18px;

    gap:14px;

}

.vin-info{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.vin-info h2{

    font-size:28px;

    line-height:1.15;

    margin:0;

}

.vin-info p{

    display:none;

}

/* ==========================================================
   FEATURES
========================================================== */

.vin-features{

    justify-content:center;

    gap:30px;

    padding-top:2px;

}

.vin-features span{

    font-size:13px;

    opacity:.9;

}

/* ==========================================================
   INPUT
========================================================== */

.vin-input input{

    height:54px;

    border-radius:14px;

}

.vin-form button{

    height:54px;

    border-radius:14px;

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

    .vin-box{

        padding:16px 18px;

    }

    .vin-info{

        display:block;

    }

    .vin-info h2{

        font-size:24px;

    }

    .vin-badge{

        margin-bottom:10px;

    }

}

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

@media (max-width:768px){

    .vin-search{

        margin-top:12px;

        margin-bottom:16px;

    }

    .vin-box{

        padding:14px;

        gap:12px;

        border-radius:16px;

    }

    .vin-info h2{

        font-size:20px;

    }

    .vin-badge{

        padding:5px 10px;

        font-size:11px;

    }

    .vin-form{

        gap:6px;

        flex-wrap:nowrap;

    }

    .vin-input{

        flex:1;

        min-width:0;

    }

    .vin-input input{

        height:42px;

        padding:0 12px 0 38px;

        font-size:13px;

    }

    .vin-input i{

        left:12px;

        font-size:14px;

    }

    .vin-form button{

        height:42px;

        padding:0 14px;

        font-size:13px;

        flex-shrink:0;

    }

    .vin-features{

        gap:12px;

        justify-content:flex-start;

        overflow-x:auto;

        white-space:nowrap;

        scrollbar-width:none;

    }

    .vin-features::-webkit-scrollbar{

        display:none;

    }

    .vin-features span{

        font-size:12px;

        flex-shrink:0;

    }

}

/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-width:420px){

    .vin-info h2{

        font-size:18px;

    }

    .vin-badge{

        display:none;

    }

    .vin-input input{

        font-size:12px;

    }

    .vin-form button{

        width:42px;

        padding:0;

    }

    .vin-form button span{

        display:none;

    }

}
/* ==========================================================
   MODELS
========================================================== */

.models{

    position:relative;

    margin-top:22px;
    margin-bottom:30px;

}

.models-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:8px;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.models-slider::-webkit-scrollbar{

    display:none;

}


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

.model-card{

    flex:0 0 165px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    text-decoration:none;

    padding:18px 16px;

    border-radius:22px;

    background:#fff;

    border:1px solid #ececec;

    transition:.30s ease;

}

.model-card:hover{

    transform:translateY(-6px);

    border-color:#1f8cff;

    box-shadow:
        0 14px 30px rgba(0,0,0,.08);

}

.model-card img{

    width:100%;

    max-width:125px;

    height:auto;

    transition:.30s;

}

.model-card:hover img{

    transform:scale(1.06);

}


/* ==========================================================
   MODEL TITLE
========================================================== */

.model-card h3{

    margin:14px 0 6px;

    color:#111;

    font-size:18px;

    font-weight:700;

}

.model-card span{

    color:#666;

    font-size:14px;

    line-height:1.5;

}


/* ==========================================================
   ACTIVE MODEL
========================================================== */

.model-card.active{

    background:#111;

    border-color:#111;

}

.model-card.active h3{

    color:#fff;

}

.model-card.active span{

    color:rgba(255,255,255,.75);

}


/* ==========================================================
   HOVER EFFECT
========================================================== */

.model-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    opacity:0;

    transition:.30s;

    background:
        linear-gradient(
        180deg,
        rgba(31,140,255,.05),
        transparent);

}

.model-card:hover::before{

    opacity:1;

}

.model-card{

    position:relative;

    overflow:hidden;

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width:1200px){

    .models-slider{

        justify-content:space-between;

        overflow:visible;

    }

}
/* ==========================================================
   MODELS
========================================================== */

.models{

    position:relative;

    margin-top:22px;
    margin-bottom:30px;

}

.models-slider{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:8px;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.models-slider::-webkit-scrollbar{

    display:none;

}

/* ==========================================================
   BMW SERIES
========================================================== */

.series{

    padding:5px 0;

    position:relative;

}

.series-wrapper{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:18px;

}

.series-card{

    position:relative;

    display:flex;
	
	font-family: "BPG Sans", sans-serif;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-decoration:none;

    background:#111827;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    overflow:hidden;

    padding:18px 14px 20px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}

.series-card:hover{

    transform:translateY(-6px);

    border-color:rgba(47,141,255,.45);

    box-shadow:
        0 14px 34px rgba(0,0,0,.35),
        0 0 22px rgba(47,141,255,.18);

}

.series-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        180deg,
        rgba(47,141,255,.08),
        transparent 45%
    );

    opacity:0;

    transition:.3s;

    pointer-events:none;

}

.series-card:hover::before{

    opacity:1;

}

/* ==========================================================
   SERIES IMAGE
========================================================== */

.series-image{

    width:100%;

    height:120px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:16px;

    overflow:hidden;

}

.series-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:
        transform .35s ease,
        filter .35s ease;

}

.series-card:hover .series-image img{

    transform:scale(1.08);

    filter:drop-shadow(0 8px 18px rgba(47,141,255,.25));

}

/* ==========================================================
   TEXT
========================================================== */

.series-card h3{

    margin:0;

    font-size:18px;

    font-weight:700;

    line-height:1.3;

    color:#fff;

    text-align:center;

}

.series-card span{

    margin-top:8px;

    font-size:13px;

    font-weight:500;

    color:#9ca3af;

    text-align:center;

    transition:color .3s ease;

}

.series-card:hover span{

    color:#d1d5db;

}

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

/* Large Desktop */

@media (max-width:1500px){

    .series-wrapper{

        grid-template-columns:repeat(6,1fr);

    }

}

/* Desktop */

@media (max-width:1300px){

    .series-wrapper{

        grid-template-columns:repeat(5,1fr);

    }

}

/* Laptop */

@media (max-width:1100px){

    .series{

        padding:60px 0;

    }

    .series-wrapper{

        grid-template-columns:repeat(4,1fr);

        gap:16px;

    }

}

/* Tablet */

@media (max-width:900px){

    .series-wrapper{

        grid-template-columns:repeat(3,1fr);

    }

    .series-card{

        padding:16px 12px 18px;

    }

    .series-image{

        height:100px;

    }

    .series-card h3{

        font-size:17px;

    }

}

/* Mobile */

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

@media (max-width:768px){

    .series{

        padding:2px 0 30px;

    }

    .series-wrapper{

        display:flex;

        gap:12px;

        overflow-x:auto;

        overflow-y:hidden;

        padding:2px 4px 10px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

    }

    .series-wrapper::-webkit-scrollbar{

        display:none;

    }

    .series-card{

        flex:0 0 145px;

        min-width:145px;

        padding:12px 10px 14px;

        scroll-snap-align:start;

    }

    .series-image{

        height:70px;

        margin-bottom:10px;

    }

    .series-card h3{

        font-size:15px;

    }

    .series-card span{

        font-size:11px;

        margin-top:4px;

    }

}
/* Small Mobile */

@media (max-width:420px){

    .series-wrapper{

        gap:12px;

    }

    .series-card{

        padding:12px 8px 14px;

    }

    .series-image{

        height:78px;

    }

    .series-card h3{

        font-size:15px;

    }

    .series-card span{

        font-size:11px;

    }

}