* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

body {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: #f7f7f7;
    color: #111;
    overflow-x: clip;
    padding-top: 76px;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}


/* HEADER */

.site-header {
    width: 100%;
    height: 76px;

    background: #ffffff;
    border-bottom: 1px solid #ececec;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    
}

.header-container {
    width: calc(100% - 140px);
    max-width: 1500px;
    height: 100%;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 200px 1fr 390px;

    align-items: center;
}


/* LOGO */

.site-logo {
    justify-self: start;

    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.8px;

    white-space: nowrap;
}


/* MENU */

.desktop-nav {
    justify-self: center;

    display: flex;
    align-items: center;

    gap: 30px;
}

.desktop-nav a {
    position: relative;

    font-size: 13px;
    font-weight: 500;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.desktop-nav a::after {
     content: "";
      position: absolute;
left: 50%;
bottom: -11px;

width: 0;
height: 2px;

background: #111;

transform: translateX(-50%);
transition:
    width 0.28s ease,
    opacity 0.28s ease;

opacity: 0;
}
.desktop-nav a.active::after { 
    width: 100%; 
    opacity: 1; 
}


/* RIGHT */

.header-actions {
    justify-self: end;

    display: flex;
    align-items: center;

    gap: 22px;
}

.header-phone {
    display: flex;
    align-items: center;

    gap: 7px;

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

    white-space: nowrap;
}

.header-favorites {
    display: flex;
    align-items: center;

    gap: 7px;

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

    white-space: nowrap;
}

.header-favorites span {
    font-size: 22px;
}

.header-order-btn {
    height: 43px;

    padding: 0 23px;

    border: none;
    border-radius: 8px;

    background: #0b0b0b;
    color: #ffffff;

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

    cursor: pointer;

    white-space: nowrap;
}


/* MOBILE ELEMENTS */

.mobile-menu-btn,
.mobile-favorite-btn {
    display: none;
}


/* SMALL DESKTOP / IPAD */

@media (max-width: 1180px) {

    .header-container {
        width: calc(100% - 70px);
        grid-template-columns: 170px 1fr auto auto;
        column-gap: 18px;
    }

    .desktop-nav {
        gap: 22px;
    }

    .desktop-nav a {
        font-size: 12px;
    }

    

    .header-actions {
        gap: 16px;
    }

    .header-favorites,
    .header-order-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: block;

        margin-left: 18px;

        border: 0;
        background: transparent;

        font-size: 23px;
    }
}


/* MOBILE */

@media (max-width: 720px) {

    body {
    padding-top: 62px;
}

    .site-header {
        height: 62px;
    }

    .header-container {
        width: 100%;
        padding: 0 17px;

        display: flex;
        justify-content: space-between;

        position: relative;
    }

    .desktop-nav,
    .header-actions {
        display: none;
    }

    .site-logo {
        position: absolute;

        left: 50%;
        transform: translateX(-50%);

        font-size: 19px;
    }

    .mobile-menu-btn {
        display: block;

        margin-left: 0;
        justify-self: end;

        border: 0;
        background: transparent;

        font-size: 23px;
    }

    .mobile-favorite-btn {
        display: block;

        margin-left: auto;

        font-size: 27px;
    }
}











/* =====================================================
   BBA CARS — HERO STATIC FINAL
===================================================== */

.hero {
    width: 100%;
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #fafbfc 46%,
            #f4f5f6 100%
        );

    border-bottom: 1px solid #eceeef;
}


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

.hero-inner {
    width: calc(100% - 140px);
    max-width: 1500px;

    height: 430px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 44% 56%;

    align-items: center;
}


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

.hero-content {
    position: relative;
    z-index: 5;

    min-width: 0;
}


.hero-content h1 {
    margin: 0;

    color: #0b0b0b;

    font-size: 48px;
    line-height: 1.07;

    font-weight: 750;
    letter-spacing: -1.9px;
}


.hero-content h1 span {
    display: block;
    white-space: nowrap;
}


/* DESCRIPTION */

.hero-description {
    max-width: 500px;

    margin-top: 20px;

    color: #5d6267;

    font-size: 14px;
    line-height: 1.65;

    font-weight: 400;
}


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

.hero-buttons {
    margin-top: 25px;

    display: flex;
    align-items: center;

    gap: 12px;
}


.hero-primary-btn,
.hero-credit-btn {
    height: 47px;

    padding: 0 23px;

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

    border-radius: 8px;

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

    white-space: nowrap;
}


/* PRIMARY BUTTON */

.hero-primary-btn {
    background: #0b0b0b;
    color: #ffffff;

    border: 1px solid #0b0b0b;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.hero-primary-btn:hover {
    background: #242424;
    transform: translateY(-1px);
}


/* CREDIT BUTTON */

.hero-credit-btn {
    gap: 10px;

    background: rgba(255,255,255,0.9);
    color: #111111;

    border: 1px solid #d7dade;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.hero-credit-btn:hover {
    background: #ffffff;
    border-color: #bfc3c7;
}


.hero-credit-btn svg {
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =====================================================
   HERO RIGHT — STATIC IMAGE
===================================================== */

.hero-visual {
    width: 100%;
    height: 430px;

    position: relative;

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

    overflow: hidden;
}


/* IMAGE */

.hero-car-image {
    width: 145%;
    height: 135%;

    max-width: none;

    display: block;

    object-fit: cover;
    object-position: 58% center;

    transform: translateY(4px);
}


/* SOFT BLEND */

.hero-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            #fafbfc 0%,
            rgba(250,251,252,0.88) 4%,
            rgba(250,251,252,0.48) 10%,
            rgba(250,251,252,0.16) 17%,
            transparent 25%
        ),

        linear-gradient(
            270deg,
            #f4f5f6 0%,
            rgba(244,245,246,0.50) 4%,
            transparent 12%
        ),

        linear-gradient(
            180deg,
            rgba(250,251,252,0.45) 0%,
            transparent 10%
        ),

        linear-gradient(
            0deg,
            rgba(244,245,246,0.65) 0%,
            transparent 13%
        );
}


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

.hero-stats {
    width: calc(100% - 140px);
    max-width: 1500px;

    height: 96px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 48px;

    
}


.hero-stat {
    display: flex;
    align-items: center;

    gap: 10px;
}


.hero-stat-icon {
    width: 36px;
    height: 36px;

    flex: 0 0 36px;

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

    border: 1px solid #e1e4e6;
    border-radius: 9px;

    background: rgba(255,255,255,0.88);
}


.hero-stat-icon svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: #171717;
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.hero-stat-text {
    display: flex;
    flex-direction: column;

    gap: 4px;
}


.hero-stat-text strong {
    color: #111111;

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

    font-weight: 700;

    white-space: nowrap;
}


.hero-stat-text span {
    color: #696e73;

    font-size: 10px;
    line-height: 1.2;

    white-space: nowrap;
}


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

@media (max-width: 1350px) {

    .hero-inner,
    .hero-stats {
        width: calc(100% - 100px);
    }

    .hero-inner {
        height: 400px;

        grid-template-columns: 45% 55%;
    }

    .hero-content h1 {
        font-size: 44px;
    }

    .hero-visual {
        height: 400px;
    }

    .hero-car-image {
        width: 140%;
        height: 130%;
    }

    .hero-stats {
        height: 90px;
        gap: 38px;
    }
}


/* =====================================================
   IPAD
===================================================== */

@media (max-width: 1180px) {

    .hero-inner,
    .hero-stats {
        width: calc(100% - 70px);
    }

    .hero-inner {
        height: 350px;

        grid-template-columns: 47% 53%;
    }

    .hero-content h1 {
        font-size: 37px;
        letter-spacing: -1.4px;
    }

    .hero-description {
        max-width: 390px;

        margin-top: 15px;

        font-size: 12px;
    }

    .hero-buttons {
        margin-top: 19px;
    }

    .hero-primary-btn,
    .hero-credit-btn {
        height: 41px;

        padding: 0 17px;

        font-size: 11px;
    }

    .hero-visual {
        height: 350px;
    }

    .hero-car-image {
        width: 135%;
        height: 125%;

        object-position: 58% center;
    }

    .hero-stats {
        height: 84px;

        gap: 25px;
    }

    .hero-stat-icon {
        width: 31px;
        height: 31px;

        flex-basis: 31px;
    }

    .hero-stat-text strong {
        font-size: 13px;
    }

    .hero-stat-text span {
        font-size: 9px;
    }
}


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

@media (max-width: 720px) {

    .hero {
        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f6f7f8 100%
            );
    }

    .hero-inner {
        width: 100%;
        height: auto;

        padding: 28px 18px 0;

        display: flex;
        flex-direction: column;

        align-items: stretch;
    }

    .hero-content h1 {
        font-size: 31px;
        line-height: 1.08;

        letter-spacing: -1.1px;
    }

    .hero-content h1 span {
        white-space: normal;
    }

    .hero-description {
        max-width: 300px;

        margin-top: 14px;

        font-size: 11px;
        line-height: 1.55;
    }

    .hero-description br {
        display: none;
    }

    .hero-buttons {
        margin-top: 18px;

        flex-direction: column;
        align-items: flex-start;

        gap: 8px;
    }

    .hero-primary-btn,
    .hero-credit-btn {
        height: 40px;

        padding: 0 17px;

        font-size: 11px;
    }

    .hero-visual {
        width: 100%;
        height: 90px;

        margin-top: 10px;
    }

    .hero-car-image {
        width: 145%;
        height: 130%;

        object-fit: cover;
        object-position: 58% center;

        transform: none;
    }

    .hero-stats {
        width: 100%;
        height: auto;

        padding: 18px;

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

        gap: 17px 12px;
    }

    .hero-stat-icon {
        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }

    .hero-stat-text strong {
        font-size: 13px;
    }

    .hero-stat-text span {
        font-size: 9px;
    }
}







/* =====================================================
   SEARCH / FILTER PANEL
===================================================== */

.search-section {
    width: 100%;
    position: relative;
    z-index: 20;
}

.search-panel {
    width: calc(100% - 280px);
    max-width: 1230px;

    min-height: 68px;

    margin: 5px auto 0;
    padding: 9px 10px;

    display: grid;
    grid-template-columns: 1.8fr 0.85fr 0.95fr 1.05fr 150px;
    align-items: center;

    gap: 10px;

    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e8eaec;
    border-radius: 14px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.045);
}


/* SEARCH INPUT */

.search-input-wrap {
    height: 46px;

    display: flex;
    align-items: center;

    padding: 0 15px;

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

    background: #ffffff;
}

.search-icon {
    margin-right: 9px;

    color: #8a8f94;

    font-size: 18px;
}

.search-input-wrap input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #111;

    font-size: 12px;
}

.search-input-wrap input::placeholder {
    color: #9a9ea3;
}


/* SELECT */

.search-select {
    width: 100%;
    height: 46px;

    padding: 0 14px;

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

    background: #ffffff;

    color: #222;

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

    outline: none;
    cursor: pointer;
}


/* SEARCH BUTTON */

.search-submit-btn {
    height: 46px;

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

    gap: 7px;

    border: 0;
    border-radius: 8px;

    background: #0b0b0b;
    color: #ffffff;

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

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.search-submit-btn:hover {
    background: #252525;
    transform: translateY(-1px);
}





/* =====================================================
   SEARCH / FILTER — IPAD
===================================================== */

@media (max-width: 1180px) {

    .search-panel {
        width: calc(100% - 70px);

        grid-template-columns:
            1.65fr
            0.8fr
            0.9fr
            1fr
            120px;

        gap: 8px;

        min-height: 62px;
        padding: 8px;

        margin-top: 16px;
    }

    .search-input-wrap,
    .search-select,
    .search-submit-btn {
        height: 42px;
    }

    .search-input-wrap {
        padding: 0 12px;
    }

    .search-input-wrap input,
    .search-select,
    .search-submit-btn {
        font-size: 10px;
    }

    .search-icon {
        font-size: 15px;
        margin-right: 7px;
    }
}



/* =====================================================
   SEARCH / FILTER — MOBILE
===================================================== */

@media (max-width: 720px) {

    .search-section {
        padding: 0 18px;
    }

    .search-panel {
        width: 100%;
        max-width: none;

        margin: 16px auto 0;
        padding: 10px;

        display: flex;
        flex-direction: column;

        gap: 8px;

        border-radius: 12px;
    }

    .search-input-wrap,
    .search-select,
    .search-submit-btn {
        width: 100%;
        height: 44px;
    }

    .search-input-wrap {
        padding: 0 12px;
    }

    .search-input-wrap input,
    .search-select,
    .search-submit-btn {
        font-size: 11px;
    }

    .search-submit-btn {
        margin-top: 2px;
    }
}

.hero-car-image[src=""] {
    display: none;
}




/* =====================================================
   CUSTOM SELECT
===================================================== */

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    width: 100%;
    height: 46px;

    padding: 0 14px;

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

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

    background: #ffffff;
    color: #222;

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

    cursor: pointer;
}

.custom-select-arrow {
    font-size: 14px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-menu {
    position: absolute;

    top: calc(100% + 6px);
    left: 0;

    width: 100%;

    padding: 6px;

    display: none;

    background: #ffffff;
    border: 1px solid #e1e4e7;
    border-radius: 10px;

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

    z-index: 100;
}

.custom-select.open .custom-select-menu {
    display: block;
}

.custom-select-option {
    width: 100%;
    min-height: 38px;

    padding: 0 11px;

    display: flex;
    align-items: center;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #222;

    font-size: 12px;
    text-align: left;

    cursor: pointer;
}

.custom-select-option:hover {
    background: #f4f5f6;
}





/* =====================================================
   MASHHUR AVTOMOBILLAR
===================================================== */

.cars-section {
    width: 100%;
    padding: 34px 0 10px;
}

.cars-section-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}

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

    margin-bottom: 18px;
}

.cars-section-header h2 {
    margin: 0;

    color: #111111;

    font-size: 24px;
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: -0.5px;
}

.cars-view-all {
    color: #555b60;

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

    transition: color 0.2s ease;
}

.cars-view-all:hover {
    color: #111111;
}

.cars-container {
    width: 100%;

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

    gap: 18px;
}








/* =====================================================
   NEW CAR CARD — CONCEPT MATCH
===================================================== */

.car-card {
    position: relative;
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e7e9eb;
    border-radius: 14px;

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035);

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

.car-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}


/* IMAGE */

.car-card-media {
    position: relative;

    width: 100%;
    height: 170px;

    overflow: hidden;

    background: #f4f5f6;
}

.car-card-media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* BADGES */

.car-card-badges {
    position: absolute;

    top: 10px;
    left: 10px;

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

    z-index: 5;
}

.car-card-badges .car-badge {
    position: static;

    padding: 5px 8px;

    border-radius: 6px;

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

    font-weight: 700;
}

.badge-top {
    background: #111;
    color: #fff;
}

.badge-new {
    background: #4da54d;
    color: #fff;
}

.badge-sale {
    background: #ef4040;
    color: #fff;
}


/* FAVORITE */

.car-favorite-btn {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 31px;
    height: 31px;

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

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

    background: rgba(255, 255, 255, 0.96);
    color: #111;

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

    cursor: pointer;

    z-index: 5;
transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
    
}
.car-favorite-btn:hover {
    background: #ffffff;
    border-color: #cfd3d6;
    transform: scale(1.04);
}

.car-favorite-btn.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}


/* BODY */

.car-card-body {
    padding: 10px 12px 11px;
}

.car-card-title {
    margin: 0;

    color: #111;

    font-size: 13.5px;
    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -0.1px;
}

.car-card-price {
    margin-top: 6px;

    color: #111;

    font-size: 14px;
    line-height: 1.2;

    font-weight: 700;
}


/* SPECS */

.car-card-specs {
    margin-top: 10px;

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

    gap: 6px 10px;
}

.car-spec-item {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    color: #3f4448;

    font-size: 9px;
    line-height: 1.2;

    white-space: nowrap;
}

.car-spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 12px;

    color: #1b1d1f;

    font-size: 10px;
    line-height: 1;
}


/* FEATURES */

.car-card-features {
    margin-top: 7px;

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

    gap: 4px 7px;
}

.car-card-features:empty {
    display: none;
}

.car-card-features span {
    color: #555a5f;

    font-size: 9.5px;
    line-height: 1.3;
}

.car-card-features span:not(:last-child)::after {
    content: "•";
    margin-left: 8px;
    color: #a6aaad;
}


/* DETAILS */

.car-details-link {
    margin-top: 9px;

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

    gap: 7px;

    color: #111111;

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

    font-weight: 700;

    text-decoration: none;

    transition:
        gap 0.2s ease,
        opacity 0.2s ease;
}

.car-details-link span {
    font-size: 14px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.car-details-link:hover {
    opacity: 0.72;
}

.car-details-link:hover span {
    transform: translateX(3px);
}








/* =====================================================
   MASHHUR AVTOMOBILLAR — IPAD
===================================================== */

@media (max-width: 1180px) {

    .cars-section-inner {
        width: calc(100% - 70px);
    }

    .cars-container {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.car-card-media {
    height: 145px;
}

.car-card-body {
    padding: 9px 10px 10px;
}

.car-card-title {
    font-size: 12px;
}

.car-card-price {
    font-size: 13px;
}

.car-spec-item {
    font-size: 8.5px;
}

.car-card-features span {
    font-size: 8.5px;
}
}


/* =====================================================
   MASHHUR AVTOMOBILLAR — MOBILE
===================================================== */

@media (max-width: 720px) {

    .cars-section {
        padding: 28px 0 50px;
    }

    .cars-section-inner {
        width: 100%;
        padding: 0 18px;
    }

    .cars-section-header {
        margin-bottom: 16px;
    }

    .cars-section-header h2 {
        font-size: 23px;
    }

    .home-page .cars-container,
.cars-page .cars-container  {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .car-card {
        width: 100%;
    }

    .car-card-media {
        height: 210px;
    }
}







/* 981px — 1180px : 4 ta karta */
@media (min-width: 981px) and (max-width: 1180px) {
    .cars-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
}


/* 721px — 980px : 3 ta karta */
@media (min-width: 721px) and (max-width: 980px) {
    .cars-container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}


/* 720px va past : 1 ta karta */
@media (max-width: 720px) {
    .cars-container {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}











/* ======================================================
   NASIYA SECTION
====================================================== */

.installment-section {
    padding: 90px 24px;
    background: #f5f5f3;
}

.installment-section .container {
    max-width: 1280px;
    margin: 0 auto;
}

.installment-box {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;

    padding: 64px;
    background: #ffffff;
    border: 1px solid #e7e7e4;
    border-radius: 28px;
}

.installment-content {
    max-width: 650px;
}

.section-label {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #777;
}

.installment-content h2 {
    margin: 0 0 20px;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.08;
    letter-spacing: -1.5px;
    color: #111;
}

.installment-content > p {
    max-width: 570px;
    margin: 0;

    font-size: 16px;
    line-height: 1.7;
    color: #666;
}

.installment-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;

    margin-top: 30px;
}

.installment-benefit {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.installment-benefit span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;
    border-radius: 50%;

    background: #111;
    color: #fff;
    font-size: 11px;
}

.installment-apply-btn {
    margin-top: 36px;
    padding: 16px 26px;

    border: 0;
    border-radius: 12px;

    background: #111;
    color: #fff;

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

    cursor: pointer;
    transition: 0.25s ease;
}

.installment-apply-btn:hover {
    background: #2b2b2b;
    transform: translateY(-2px);
}


/* O‘NG TOMONDAGI PREMIUM KARTA */

.installment-card {
    min-height: 330px;
    padding: 38px;

    display: flex;
    flex-direction: column;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #151515 0%,
            #242424 55%,
            #101010 100%
        );

    color: #fff;
}

.installment-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #aaa;
}

.installment-card h3 {
    margin: 42px 0 16px;

    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.installment-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;
    color: #aaa;
}

.installment-card-bottom {
    margin-top: auto;
    padding-top: 28px;

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

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

    font-size: 13px;
    color: #aaa;
}

.installment-card-bottom strong {
    font-size: 17px;
    color: #fff;
}


/* TABLET */

@media (max-width: 900px) {
    .installment-section {
        padding: 70px 20px;
    }

    .installment-box {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 44px;
    }
}


/* MOBILE */

@media (max-width: 600px) {
    .installment-section {
        padding: 50px 14px;
    }

    .installment-box {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .installment-content h2 {
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .installment-benefits {
        flex-direction: column;
        gap: 14px;
    }

    .installment-apply-btn {
        width: 100%;
    }

    .installment-card {
        min-height: 290px;
        padding: 28px 24px;
        border-radius: 18px;
    }

    .installment-card h3 {
        margin-top: 32px;
        font-size: 24px;
    }
}







/* ======================================================
   CARS PAGE - CATALOG HERO
====================================================== */

.catalog-hero {
    width: 100%;
    padding: 46px 70px 18px;
    background: #f7f7f5;
}

.catalog-hero-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}

.catalog-hero h1 {
    margin: 0 0 8px;

    font-size: 38px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1px;

    color: #111111;
}

.catalog-hero p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #666666;
}


/* TABLET */

@media (max-width: 980px) {
    .catalog-hero {
        padding: 38px 28px 16px;
    }

    .catalog-hero-inner {
        width: 100%;
    }

    .catalog-hero h1 {
        font-size: 34px;
    }
}


/* MOBILE */

@media (max-width: 720px) {
    .catalog-hero {
        padding: 30px 18px 14px;
    }

    .catalog-hero h1 {
        font-size: 30px;
    }

    .catalog-hero p {
        font-size: 13px;
    }
}


















/* ======================================================
   CARS PAGE — CATALOG FILTER — FINAL
====================================================== */

.cars-page .catalog-filter-section {
    width: 100%;
    padding: 18px 48px 0;
}

.cars-page .catalog-filter-bar {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(300px, 360px)
        155px
        175px
        150px
        minmax(30px, 1fr)
        145px
        155px;

    align-items: center;
    gap: 14px;
}


/* =========================
   QIDIRUV
========================= */

.cars-page .catalog-search-box {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;

    padding: 0 15px;

    background: #ffffff;
    border: 1px solid #e3e5e7;
    border-radius: 12px;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.025);

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

.cars-page .catalog-search-box:focus-within {
    border-color: #c8cbce;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.025);
}

.cars-page .catalog-search-icon {
    flex: 0 0 auto;

    margin-right: 10px;

    color: #858a8f;
    font-size: 17px;
    line-height: 1;
}

.cars-page .catalog-search-box input {
    flex: 1;
    min-width: 0;
    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;
    color: #111111;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
}

.cars-page .catalog-search-box input::placeholder {
    color: #90959a;
}

.cars-page .catalog-search-clear {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    margin-left: 8px;
    padding: 0;

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

    border: 0;
    background: transparent;

    color: #34383c;

    font-family: inherit;
    font-size: 21px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}


/* =========================
   FILTER SELECT
========================= */

.cars-page .catalog-filter-select,
.cars-page .catalog-sort-select {
    position: relative;
    width: 100%;
}

.cars-page .catalog-filter-select .custom-select-trigger,
.cars-page .catalog-sort-select .custom-select-trigger {
    width: 100%;
    height: 50px;

    padding: 0 15px;

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

    border: 1px solid #e3e5e7;
    border-radius: 12px;

    background: #ffffff;
    color: #171717;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.025);

    cursor: pointer;

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

.cars-page .catalog-filter-select .custom-select-trigger:hover,
.cars-page .catalog-sort-select .custom-select-trigger:hover {
    border-color: #cfd2d5;
    background: #fdfdfd;
}

.cars-page .catalog-filter-bar .custom-select-arrow {
    flex: 0 0 auto;

    color: #555b60;

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

    transition: transform 0.2s ease;
}

.cars-page .catalog-filter-bar .custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}


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

.cars-page .catalog-filter-bar .custom-select-menu {
    position: absolute;

    top: calc(100% + 7px);
    left: 0;

    width: 100%;
    min-width: 155px;

    padding: 6px;

    display: none;

    background: #ffffff;

    border: 1px solid #e3e5e7;
    border-radius: 12px;

    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10);

    z-index: 200;
}

.cars-page .catalog-filter-bar .custom-select.open .custom-select-menu {
    display: block;
    max-height: 172px;
overflow-y: auto;
overscroll-behavior: contain;
}

.cars-page .catalog-filter-bar .custom-select-option {
    width: 100%;
    min-height: 40px;

    padding: 0 12px;

    display: flex;
    align-items: center;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #222222;

    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;

    cursor: pointer;

    transition: background 0.15s ease;
}

.cars-page .catalog-filter-bar .custom-select-option:hover {
    background: #f3f4f5;
}


/* =========================
   O'RTADAGI BO'SH JOY
========================= */

.cars-page .catalog-filter-spacer {
    min-width: 30px;
}


/* =========================
   SEVIMLILAR
========================= */

.cars-page .catalog-favorites-btn {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #e3e5e7;
    border-radius: 12px;

    background: #ffffff;
    color: #171717;

    font-family: inherit;
    font-size: 13px;
    font-weight: 500;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.025);

    cursor: pointer;

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

.cars-page .catalog-favorites-btn:hover {
    border-color: #cfd2d5;
    background: #fdfdfd;
    transform: translateY(-1px);
}

.cars-page .catalog-favorites-btn span {
    font-size: 20px;
    line-height: 1;
}


/* =========================
   KARTALAR BILAN MASOFA
========================= */

.cars-page .cars-section {
    padding-top: 18px;
}


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

@media (min-width: 721px) and (max-width: 1180px) {
.cars-page .catalog-filter-section {
    padding: 16px 35px 0;
}

.cars-page .catalog-filter-bar {
    grid-template-columns:
        minmax(220px, 1.5fr)
        125px
        145px
        120px
        125px
        130px;

    gap: 9px;
}

.cars-page .catalog-filter-spacer {
    display: none;
}

.cars-page .catalog-search-box,
.cars-page .catalog-filter-select .custom-select-trigger,
.cars-page .catalog-sort-select .custom-select-trigger,
.cars-page .catalog-favorites-btn {
    height: 46px;
}

.cars-page .catalog-filter-select .custom-select-trigger,
.cars-page .catalog-sort-select .custom-select-trigger,
.cars-page .catalog-favorites-btn {
    padding: 0 11px;
    font-size: 11px;
}

.cars-page .catalog-search-box input {
    font-size: 11px;
}
}


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

@media (max-width: 720px) {

    .cars-page .catalog-filter-section {
        padding: 14px 18px 0;
    }

    .cars-page .catalog-filter-bar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 9px;
    }

    .cars-page .catalog-search-box {
        grid-column: 1 / -1;
        height: 46px;
    }

    .cars-page .catalog-filter-select .custom-select-trigger,
    .cars-page .catalog-sort-select .custom-select-trigger,
    .cars-page .catalog-favorites-btn {
        height: 46px;
        padding: 0 12px;

        font-size: 12px;
    }

    .cars-page .catalog-filter-spacer {
        display: none;
    }

    .cars-page .catalog-favorites-btn,
    .cars-page .catalog-sort-select {
        width: 100%;
    }

    .cars-page .cars-section {
        padding-top: 14px;
    }
}








/* ======================================================
   CARS PAGE — EMPTY SEARCH RESULT
====================================================== */

.cars-page .catalog-empty-state {
    width: 100%;
    min-height: 220px;

    margin-top: 18px;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: #ffffff;

    border: 1px solid #e5e7e9;
    border-radius: 14px;

    text-align: center;
}

.cars-page .catalog-empty-state strong {
    color: #111111;

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

.cars-page .catalog-empty-state span {
    color: #777d82;

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


/* Natija topilmaganda sahifa birdan qisqarib ketmasin */

.cars-page .cars-section {
    min-height: 300px;
}


/* MOBILE */

@media (max-width: 720px) {

    .cars-page .catalog-empty-state {
        min-height: 170px;
        margin-top: 14px;

        padding: 20px;
    }

    .cars-page .catalog-empty-state strong {
        font-size: 15px;
    }

    .cars-page .catalog-empty-state span {
        font-size: 11px;
    }

    .cars-page .cars-section {
        min-height: 240px;
    }
}






.cars-page .catalog-favorites-btn.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}









/* ====================================================== CARS PAGE — IPAD HERO ALIGN ====================================================== */
@media (min-width: 721px) and (max-width: 1180px) {
.cars-page .catalog-hero {
    padding: 38px 0 16px;
}

.cars-page .catalog-hero-inner {
    width: calc(100% - 70px);
    margin: 0 auto;
}
}










/* =========================
   NASIYA — HERO
========================= */

.nasiya-hero {
  padding: 36px 24px 24px;
  background: #f5f6f7;
}

.nasiya-hero-inner {
  max-width: 1440px;
  min-height: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: stretch;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #f6f7f8 48%,
    #eceff1 100%
  );

  border: 1px solid #e7e9eb;
  border-radius: 28px;
}

.nasiya-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px 64px;
}

.nasiya-kicker {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.1px;
  color: #767b80;
}

.nasiya-hero h1 {
  max-width: 640px;
  margin: 0;

  font-size: clamp(46px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -3.5px;
  font-weight: 700;
  color: #111214;
}

.nasiya-hero p {
  max-width: 590px;
  margin: 28px 0 0;

  font-size: 17px;
  line-height: 1.7;
  color: #62676c;
}

.nasiya-hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

.nasiya-btn {
  min-height: 50px;
  padding: 0 24px;

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

  border-radius: 10px;
  text-decoration: none;

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

  transition: 0.2s ease;
}

.nasiya-btn-dark {
  background: #101113;
  color: #fff;
  border: 1px solid #101113;
}

.nasiya-btn-dark:hover {
  background: #27292c;
}

.nasiya-btn-light {
  background: rgba(255,255,255,0.72);
  color: #151618;
  border: 1px solid #d9dde0;
}

.nasiya-btn-light:hover {
  background: #fff;
  border-color: #c8ccd0;
}

.nasiya-hero-visual {
  position: relative;
  min-height: 560px;
}

.nasiya-visual-placeholder {
  position: absolute;
  inset: 0;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.25),
      rgba(210,215,219,0.45)
    );
}

.nasiya-visual-placeholder span {
  font-size: 13px;
  letter-spacing: 1px;
  color: #999ea3;
}

/* TABLET */
@media (max-width: 1024px) {
  .nasiya-hero-inner {
    grid-template-columns: 1fr 0.9fr;
    min-height: 500px;
  }

  .nasiya-hero-copy {
    padding: 54px 40px;
  }

  .nasiya-hero h1 {
    font-size: 54px;
  }

  .nasiya-hero-visual {
    min-height: 500px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .nasiya-hero {
    padding: 16px 14px 18px;
  }

  .nasiya-hero-inner {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
  }

  .nasiya-hero-copy {
    padding: 42px 24px 28px;
  }

  .nasiya-hero h1 {
    font-size: 42px;
    line-height: 1;
    letter-spacing: -2px;
  }

  .nasiya-hero p {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.6;
  }

  .nasiya-hero-actions {
    flex-direction: column;
    margin-top: 26px;
  }

  .nasiya-btn {
    width: 100%;
  }

  .nasiya-hero-visual {
    min-height: 280px;
  }
}






/* NASIYA — CAR SLIDER */

.nasiya-car-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
  overflow: hidden;
}

.nasiya-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  padding: 35px;

  object-fit: contain;
  object-position: center;

  opacity: 0;
  transform: translateX(35px) scale(1.32);

  transition:
    opacity 0.9s ease,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);

  pointer-events: none;
}

.nasiya-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1.35);
}

/* TABLET */
@media (max-width: 1024px) {
  .nasiya-car-slider {
    min-height: 500px;
  }

  .nasiya-slide {
    padding: 25px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .nasiya-car-slider {
    min-height: 280px;
  }

  .nasiya-slide {
    padding: 15px;
  }
}










/* NASIYA — BENEFITS */

.nasiya-benefits {
  padding: 0 24px 34px;
  background: #f5f6f7;
}

.nasiya-benefits-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  background: #fff;
  border: 1px solid #e7e9eb;
  border-radius: 20px;
  overflow: hidden;
}

.nasiya-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  padding: 30px 34px;
  border-right: 1px solid #e7e9eb;
}

.nasiya-benefit-item:last-child {
  border-right: none;
}

.nasiya-benefit-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

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

  border: 1px solid #d9dde0;
  border-radius: 10px;

  font-size: 17px;
  color: #151618;
}

.nasiya-benefit-item h3 {
  margin: 1px 0 7px;
  font-size: 16px;
  font-weight: 700;
  color: #151618;
}

.nasiya-benefit-item p {
  margin: 0;
  max-width: 300px;
  font-size: 13px;
  line-height: 1.55;
  color: #74797e;
}

/* MOBILE */
@media (max-width: 768px) {
  .nasiya-benefits {
    padding: 0 14px 24px;
  }

  .nasiya-benefits-inner {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .nasiya-benefit-item {
    padding: 22px;
    border-right: none;
    border-bottom: 1px solid #e7e9eb;
  }

  .nasiya-benefit-item:last-child {
    border-bottom: none;
  }
}








/* =========================
   NASIYA — PROCESS
========================= */

.nasiya-process {
  padding: 70px 24px 80px;
  background: #ffffff;
}

.nasiya-process-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.nasiya-process-head {
  max-width: 600px;
  margin-bottom: 55px;
}

.nasiya-section-label {
  display: block;
  margin-bottom: 14px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8a8f94;
}

.nasiya-process-head h2 {
  margin: 0;

  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-weight: 700;
  color: #111214;
}

.nasiya-process-head p {
  margin: 16px 0 0;

  font-size: 15px;
  line-height: 1.65;
  color: #73787d;
}


/* 4 STEPS */

.nasiya-process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

/* gorizontal chiziq */
.nasiya-process-steps::before {
  content: "";
  position: absolute;

  top: 22px;
  left: 22px;
  right: 22px;

  height: 1px;
  background: #dfe2e5;
}

.nasiya-process-step {
  position: relative;
  z-index: 1;

  padding-right: 45px;
}

.nasiya-step-number {
  width: 44px;
  height: 44px;

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

  margin-bottom: 24px;

  background: #ffffff;
  border: 1px solid #cfd3d6;
  border-radius: 50%;

  font-size: 12px;
  font-weight: 700;
  color: #111214;
}

.nasiya-process-step h3 {
  margin: 0 0 9px;

  font-size: 17px;
  font-weight: 700;
  color: #17181a;
}

.nasiya-process-step p {
  max-width: 260px;
  margin: 0;

  font-size: 13px;
  line-height: 1.6;
  color: #7b8085;
}


/* TABLET */

@media (max-width: 1024px) {

  .nasiya-process {
    padding: 60px 24px 70px;
  }

  .nasiya-process-step {
    padding-right: 25px;
  }

}


/* MOBILE */

@media (max-width: 768px) {

  .nasiya-process {
    padding: 50px 20px 60px;
  }

  .nasiya-process-head {
    margin-bottom: 38px;
  }

  .nasiya-process-head h2 {
    font-size: 32px;
  }

  .nasiya-process-steps {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .nasiya-process-steps::before {
    top: 22px;
    bottom: 22px;
    left: 21px;
    right: auto;

    width: 1px;
    height: auto;
  }

  .nasiya-process-step {
    min-height: 125px;
    padding: 0 0 32px 70px;
  }

  .nasiya-step-number {
    position: absolute;
    top: 0;
    left: 0;

    margin: 0;
  }

  .nasiya-process-step h3 {
    padding-top: 4px;
  }

}










/* =========================
   NASIYA — AVTOMOBILLAR
========================= */

.nasiya-cars {
  padding: 80px 24px 90px;
  background: #f5f6f7;
}

.nasiya-cars-inner {
  max-width: 1440px;
  margin: 0 auto;
}

.nasiya-cars-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 38px;
}

.nasiya-cars-head h2 {
  margin: 0;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-weight: 700;
  color: #111214;
}

.nasiya-cars-head p {
  margin: 14px 0 0;
  font-size: 15px;
  color: #73787d;
}

.nasiya-cars-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding-bottom: 4px;

  font-size: 14px;
  font-weight: 600;
  color: #151618;
  text-decoration: none;

  border-bottom: 1px solid #bfc3c7;
}

.nasiya-cars-all span {
  transition: transform 0.2s ease;
}

.nasiya-cars-all:hover span {
  transform: translateX(4px);
}


/* 8 TA AVTOMOBIL — 4 × 2 */

.nasiya-cars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

/* Nasiya ichidagi kartalarni biroz ixcham qilamiz */

.nasiya-cars-grid .car-card {
  min-width: 0;
}




/* TABLET */

@media (max-width: 1100px) {
  .nasiya-cars-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* MOBILE */

@media (max-width: 768px) {
  .nasiya-cars {
    padding: 55px 14px 65px;
  }

  .nasiya-cars-head {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 28px;
  }

  .nasiya-cars-head h2 {
    font-size: 32px;
  }

  .nasiya-cars-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}








/* =====================================================
   NASIYA — APPLICATION
===================================================== */

.nasiya-apply {
  padding: 90px 24px;
  background: #111315;
}

.nasiya-apply-inner {
  max-width: 1440px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 520px;
  gap: 100px;
  align-items: center;
}

.nasiya-apply .nasiya-section-label {
  color: #8f9498;
}

.nasiya-apply-copy h2 {
  max-width: 620px;
  margin: 14px 0 18px;

  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -1.5px;
  font-weight: 700;

  color: #ffffff;
}

.nasiya-apply-copy > p {
  max-width: 580px;
  margin: 0;

  font-size: 15px;
  line-height: 1.8;
  color: #989da1;
}


/* QADAMLAR */

.nasiya-apply-points {
  margin-top: 46px;

  display: flex;
  gap: 34px;
}

.nasiya-apply-points > div {
  flex: 1;
  border-top: 1px solid #34383b;
  padding-top: 16px;
}

.nasiya-apply-points span {
  display: block;
  margin-bottom: 9px;

  font-size: 11px;
  color: #72777b;
}

.nasiya-apply-points p {
  margin: 0;

  font-size: 13px;
  line-height: 1.5;
  color: #d5d7d9;
}


/* FORMA */

.nasiya-apply-card {
  padding: 36px;

  background: #ffffff;
  border-radius: 16px;
}

.nasiya-apply-card form {
  display: flex;
  flex-direction: column;
}

.nasiya-apply-card label {
  margin: 0 0 8px;

  font-size: 12px;
  font-weight: 600;
  color: #303336;
}

.nasiya-apply-card input {
  width: 100%;
  height: 54px;

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

  border: 1px solid #dedfe1;
  border-radius: 8px;
  outline: none;

  background: #fafafa;

  font-family: inherit;
  font-size: 14px;
  color: #151719;

  transition: border-color 0.2s ease,
              background 0.2s ease;
}

.nasiya-apply-card input:focus {
  border-color: #777c80;
  background: #ffffff;
}

.nasiya-apply-card input::placeholder {
  color: #a4a8ab;
}


/* TUGMA */

.nasiya-apply-submit {
  width: 100%;
  height: 56px;

  margin-top: 4px;
  padding: 0 18px;

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

  border: 0;
  border-radius: 8px;

  background: #17191b;
  color: #ffffff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

.nasiya-apply-submit span {
  font-size: 18px;
  transition: transform 0.2s ease;
}

.nasiya-apply-submit:hover span {
  transform: translateX(4px);
}


/* TABLET */

@media (max-width: 1000px) {

  .nasiya-apply-inner {
    grid-template-columns: 1fr 440px;
    gap: 50px;
  }

  .nasiya-apply-copy h2 {
    font-size: 39px;
  }

}


/* MOBILE */

@media (max-width: 768px) {

  .nasiya-apply {
    padding: 65px 16px;
  }

  .nasiya-apply-inner {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .nasiya-apply-copy h2 {
    font-size: 34px;
  }

  .nasiya-apply-points {
    flex-direction: column;
    gap: 20px;
    margin-top: 35px;
  }

  .nasiya-apply-card {
    padding: 24px 18px;
  }

}




/* =========================
   NASIYA SUCCESS MODAL
========================= */

.nasiya-success-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nasiya-success-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nasiya-success-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nasiya-success-dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  padding: 48px 40px 38px;
  background: #ffffff;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);

  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nasiya-success-modal.active .nasiya-success-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nasiya-success-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f3f3f3;
  color: #111111;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.nasiya-success-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111111;
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
}

.nasiya-success-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #888888;
}

.nasiya-success-dialog h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 600;
  color: #111111;
}

.nasiya-success-dialog p {
  margin: 14px auto 0;
  max-width: 330px;
  font-size: 15px;
  line-height: 1.6;
  color: #6d6d6d;
}

.nasiya-success-ok {
  width: 100%;
  margin-top: 30px;
  padding: 15px 24px;
  border: 0;
  border-radius: 12px;
  background: #111111;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.nasiya-success-ok:hover {
  background: #292929;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .nasiya-success-dialog {
    max-width: 380px;
    padding: 42px 24px 28px;
    border-radius: 20px;
  }

  .nasiya-success-dialog h3 {
    font-size: 23px;
  }

  .nasiya-success-icon {
    width: 60px;
    height: 60px;
    font-size: 27px;
  }
}











/* =========================
   NASIYA FAQ
========================= */

.nasiya-faq {
  padding: 110px 24px;
  background: #ffffff;
}

.nasiya-faq-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}

.nasiya-faq-head {
  max-width: 620px;
  margin-bottom: 52px;
}

.nasiya-faq-head h2 {
  margin: 12px 0 14px;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: #111111;
}

.nasiya-faq-head p {
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.7;
  color: #777777;
}

.nasiya-faq-list {
  border-top: 1px solid #e7e7e7;
}

.nasiya-faq-item {
  border-bottom: 1px solid #e7e7e7;
}

.nasiya-faq-question {
  width: 100%;
  min-height: 86px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  border: 0;
  background: transparent;
  color: #111111;
  text-align: left;
  cursor: pointer;

  font-size: 19px;
  line-height: 1.4;
  font-weight: 500;
}

.nasiya-faq-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;

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

  border: 1px solid #dedede;
  border-radius: 50%;

  font-size: 22px;
  font-weight: 300;
  color: #111111;

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

.nasiya-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  transition:
    max-height 0.4s ease,
    opacity 0.3s ease;
}

.nasiya-faq-answer p {
  max-width: 760px;
  margin: 0;
  padding: 0 70px 28px 0;

  font-size: 15px;
  line-height: 1.75;
  color: #707070;
}

/* FAQ ochilgan holat */

.nasiya-faq-item.active .nasiya-faq-answer {
  max-height: 220px;
  opacity: 1;
}

.nasiya-faq-item.active .nasiya-faq-icon {
  transform: rotate(45deg);
  background: #111111;
  border-color: #111111;
  color: #ffffff;
}

/* Tablet */

@media (max-width: 900px) {
  .nasiya-faq {
    padding: 85px 24px;
  }

  .nasiya-faq-head {
    margin-bottom: 40px;
  }

  .nasiya-faq-question {
    min-height: 80px;
    font-size: 18px;
  }
}

/* Mobile */

@media (max-width: 600px) {
  .nasiya-faq {
    padding: 70px 20px;
  }

  .nasiya-faq-head {
    margin-bottom: 34px;
  }

  .nasiya-faq-head h2 {
    font-size: 31px;
  }

  .nasiya-faq-head p {
    font-size: 15px;
  }

  .nasiya-faq-question {
    min-height: 76px;
    gap: 18px;
    font-size: 16px;
  }

  .nasiya-faq-icon {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .nasiya-faq-answer p {
    padding: 0 50px 24px 0;
    font-size: 14px;
  }
}
















/* ======================================================
   SERVICES PAGE — HERO
====================================================== */

.services-hero {
  padding: 105px 24px 95px;
  background:
    radial-gradient(circle at 85% 20%, rgba(0, 0, 0, 0.045), transparent 32%),
    #f7f7f5;
}

.services-hero-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 90px;
  align-items: center;
}


/* LEFT */

.services-hero-copy {
  max-width: 700px;
}

.services-kicker {
  display: inline-block;
  margin-bottom: 20px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #777;
}

.services-hero-copy h1 {
  margin: 0;

  max-width: 720px;

  font-size: clamp(46px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 600;

  color: #111;
}

.services-hero-copy > p {
  max-width: 590px;
  margin: 26px 0 0;

  font-size: 17px;
  line-height: 1.7;

  color: #696969;
}


/* BUTTONS */

.services-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-top: 36px;
}

.services-btn {
  min-height: 52px;
  padding: 0 25px;

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

  border-radius: 10px;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

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

.services-btn:hover {
  transform: translateY(-2px);
}

.services-btn-dark {
  background: #111;
  border: 1px solid #111;
  color: #fff;
}

.services-btn-dark:hover {
  background: #292929;
}

.services-btn-light {
  background: #fff;
  border: 1px solid #dedede;
  color: #111;
}

.services-btn-light:hover {
  border-color: #aaa;
}


/* RIGHT SIDE */

.services-hero-info {
  padding-left: 12px;
}

.services-hero-info-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;

  padding: 27px 0;

  border-bottom: 1px solid #dededb;
}

.services-hero-info-item:first-child {
  border-top: 1px solid #dededb;
}

.services-hero-info-item > span {
  padding-top: 2px;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;

  color: #999;
}

.services-hero-info-item strong {
  display: block;

  margin-bottom: 7px;

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

  color: #111;
}

.services-hero-info-item p {
  margin: 0;

  font-size: 14px;
  line-height: 1.6;

  color: #777;
}


/* TABLET */

@media (max-width: 900px) {

  .services-hero {
    padding: 80px 24px 75px;
  }

  .services-hero-inner {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .services-hero-copy {
    max-width: 760px;
  }

  .services-hero-info {
    max-width: 720px;
    padding-left: 0;
  }
}


/* MOBILE */

@media (max-width: 600px) {

  .services-hero {
    padding: 62px 20px 64px;
  }

  .services-hero-inner {
    gap: 46px;
  }

  .services-kicker {
    margin-bottom: 16px;
  }

  .services-hero-copy h1 {
    font-size: 40px;
    line-height: 1.04;
  }

  .services-hero-copy > p {
    margin-top: 20px;

    font-size: 15px;
    line-height: 1.65;
  }

  .services-hero-actions {
    margin-top: 28px;
  }

  .services-btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .services-hero-info-item {
    grid-template-columns: 38px 1fr;
    gap: 12px;
    padding: 23px 0;
  }

  .services-hero-info-item strong {
    font-size: 16px;
  }
}














/* ========================================
   XIZMATLAR — SERVICES LIST
======================================== */

.services-list {
  padding: 110px 0 120px;
  background: #f7f7f5;
}

.services-list-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.services-list-head {
  max-width: 720px;
  margin-bottom: 64px;
}

.services-section-label {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #8a8a84;
}

.services-list-head h2 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 600;
  color: #171817;
}

.services-list-head p {
  max-width: 590px;
  margin: 24px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #777872;
}


/* GRID */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #dcdcd7;
  border-left: 1px solid #dcdcd7;
}


/* CARD */

.service-card {
  min-height: 330px;
  padding: 34px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  border-right: 1px solid #dcdcd7;
  border-bottom: 1px solid #dcdcd7;
  transition:
    transform 0.35s ease,
    background 0.35s ease;
}

.service-card:hover {
  background: #f1f1ee;
}

.service-number {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #9a9a94;
}

.service-card-content {
  max-width: 430px;
}

.service-card h3 {
  margin: 0 0 14px;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #191a19;
}

.service-card p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.65;
  color: #777872;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #191a19;
  text-decoration: none;
}

.service-card-link span {
  transition: transform 0.25s ease;
}

.service-card-link:hover span {
  transform: translateX(5px);
}


/* DARK FEATURE CARD */

.service-card-dark {
  background: #171a1d;
}

.service-card-dark:hover {
  background: #202429;
}

.service-card-dark .service-number,
.service-card-dark p {
  color: rgba(255, 255, 255, 0.55);
}

.service-card-dark h3,
.service-card-dark .service-card-link {
  color: #fff;
}


/* DESKTOP FEATURE CARD */

.service-card-large {
  grid-row: span 1;
}


/* TABLET */

@media (max-width: 900px) {
  .services-list {
    padding: 85px 0 95px;
  }

  .services-list-inner {
    width: min(100% - 36px, 760px);
  }

  .services-list-head {
    margin-bottom: 48px;
  }

  .service-card {
    min-height: 300px;
    padding: 30px;
  }
}


/* MOBILE */

@media (max-width: 600px) {
  .services-list {
    padding: 72px 0 80px;
  }

  .services-list-inner {
    width: calc(100% - 32px);
  }

  .services-list-head {
    margin-bottom: 40px;
  }

  .services-list-head h2 {
    font-size: 34px;
  }

  .services-list-head p {
    font-size: 14px;
  }

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

  .service-card {
    min-height: 270px;
    padding: 26px 24px;
  }

  .service-card h3 {
    font-size: 24px;
  }
}















/* =========================
   SERVICES CONTACT CTA
========================= */

.services-contact {
  padding: 110px 6%;
  background: #f5f5f2;
}

.services-contact-inner {
  max-width: 1380px;
  margin: 0 auto;
  padding: 70px 75px;

  background: #111820;
  color: #ffffff;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}

.services-contact-copy {
  max-width: 720px;
}

.services-contact .services-section-label {
  display: block;
  margin-bottom: 28px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
}

.services-contact-copy h2 {
  margin: 0;
  max-width: 650px;

  font-size: clamp(42px, 4.5vw, 68px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.045em;
}

.services-contact-copy p {
  max-width: 590px;
  margin: 30px 0 0;

  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.62);
}

.services-contact-action {
  min-width: 280px;
}

.services-contact-btn {
  width: 100%;
  min-height: 58px;
  padding: 0 22px;

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

  background: #ffffff;
  color: #111820;

  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  transition: transform 0.25s ease,
              background 0.25s ease;
}

.services-contact-btn:hover {
  transform: translateY(-2px);
  background: #eeeeea;
}

.services-contact-btn span {
  font-size: 18px;
}

.services-contact-action p {
  margin: 15px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
}




/* ========================================
   SERVICES CTA — MOBILE FIX
======================================== */

@media (max-width: 600px) {

  .services-contact {
    padding: 64px 16px;
  }

  .services-contact-inner {
    padding: 42px 24px;
    display: block;
  }

  .services-contact-copy {
    max-width: none;
  }

  .services-contact-copy h2 {
    font-size: 40px;
    line-height: 1;
  }

  .services-contact-copy p {
    margin-top: 22px;
    font-size: 14px;
  }

  .services-contact-action {
    min-width: 0;
    width: 100%;
    margin-top: 32px;
  }

  .services-contact-btn {
    width: 100%;
    min-height: 54px;
  }

  .services-contact-action p {
    margin-top: 12px;
  }
}















/* ========================================
   CONTACT PAGE — HERO
======================================== */

.contact-page .contact-hero {
  padding: 120px 0 110px;
  background: #fff;
}

.contact-page .contact-hero-inner {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 100px;
  align-items: start;
}

.contact-page .contact-eyebrow {
  display: block;
  margin-bottom: 28px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #777;
}

.contact-page .contact-hero-main h1 {
  margin: 0;

  font-size: clamp(64px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: #111;
}

.contact-page .contact-intro {
  max-width: 570px;
  margin: 38px 0 0;

  font-size: 16px;
  line-height: 1.75;
  color: #777;
}


/* RIGHT SIDE */

.contact-page .contact-hero-info {
  border-top: 1px solid #e4e4e4;
}

.contact-page .contact-info-row {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 20px;

  padding: 30px 0;
  border-bottom: 1px solid #e4e4e4;
}

.contact-page .contact-info-number {
  padding-top: 3px;

  font-size: 10px;
  letter-spacing: 0.12em;
  color: #999;
}

.contact-page .contact-info-label {
  display: block;
  margin-bottom: 10px;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #999;
}

.contact-page .contact-info-row a,
.contact-page .contact-info-row p {
  margin: 0;

  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  color: #151515;
  text-decoration: none;
}

.contact-page .contact-info-row a {
  transition: opacity 0.2s ease;
}

.contact-page .contact-info-row a:hover {
  opacity: 0.55;
}















/* ========================================
   CONTACT REQUEST
======================================== */

.contact-request {
  padding: 120px 0;
  background: #f5f5f2;
}

.contact-request-inner {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 100px;
  align-items: start;
}


/* LEFT SIDE */

.contact-section-label {
  display: block;
  margin-bottom: 30px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #777;
}

.contact-request-copy h2 {
  margin: 0 0 25px;

  max-width: 520px;

  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -3px;
  font-weight: 500;
  color: #111;
}

.contact-request-copy > p {
  max-width: 520px;
  margin: 0 0 60px;

  font-size: 16px;
  line-height: 1.8;
  color: #777;
}


/* CONTACT CHANNELS */

.contact-channels {
  border-top: 1px solid #d8d8d3;
}

.contact-channel {
  min-height: 100px;

  display: grid;
  grid-template-columns: 55px 1fr;
  align-items: center;

  border-bottom: 1px solid #d8d8d3;

  text-decoration: none;
  color: #111;

  transition: opacity 0.25s ease;
}

.contact-channel:hover {
  opacity: 0.55;
}

.contact-channel > span {
  align-self: start;
  padding-top: 30px;

  font-size: 10px;
  color: #888;
}

.contact-channel div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-channel small {
  font-size: 9px;
  letter-spacing: 2px;
  color: #888;
}

.contact-channel strong {
  font-size: 15px;
  font-weight: 500;
}


/* FORM CARD */

.contact-request-card {
  padding: 45px;

  background: #101820;
  color: #fff;
}

.contact-request-card form {
  display: flex;
  flex-direction: column;
}

.contact-request-card label {
  margin-bottom: 10px;

  font-size: 11px;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.65);
}

.contact-request-card input,
.contact-request-card textarea {
  width: 100%;
  box-sizing: border-box;

  margin-bottom: 28px;
  padding: 17px 0;

  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  outline: none;

  background: transparent;

  font: inherit;
  font-size: 15px;
  color: #fff;
}

.contact-request-card textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-request-card input::placeholder,
.contact-request-card textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

.contact-request-card input:focus,
.contact-request-card textarea:focus {
  border-bottom-color: #fff;
}


/* SUBMIT BUTTON */

.contact-submit {
  width: 100%;
  min-height: 62px;

  margin-top: 12px;
  padding: 0 22px;

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

  border: 0;
  background: #fff;

  color: #111;
  font: inherit;
  font-size: 14px;
  font-weight: 500;

  cursor: pointer;

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

.contact-submit span {
  font-size: 20px;
}

.contact-submit:hover {
  background: #e8e8e3;
}




/* ========================================
   CONTACT — MOBILE
======================================== */

@media (max-width: 600px) {

  .contact-request {
    padding: 80px 0;
    overflow: hidden;
  }

  .contact-request-inner {
    width: calc(100% - 40px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .contact-section-label {
    margin-bottom: 22px;
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  .contact-request-copy h2 {
    max-width: 100%;
    margin-bottom: 22px;

    font-size: 44px;
    line-height: 1;
    letter-spacing: -2px;
  }

  .contact-request-copy > p {
    max-width: 100%;
    margin-bottom: 45px;

    font-size: 14px;
    line-height: 1.7;
  }

  .contact-channel {
    min-height: 90px;
    grid-template-columns: 45px 1fr;
  }

  .contact-channel > span {
    padding-top: 27px;
  }

  .contact-channel strong {
    font-size: 14px;
  }

  /* qora forma */
  .contact-request-card {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 24px;
  }

  .contact-request-card input,
  .contact-request-card textarea {
    margin-bottom: 24px;
    font-size: 14px;
  }

  .contact-request-card textarea {
    min-height: 95px;
  }

  .contact-submit {
    min-height: 58px;
  }
}




/* ========================================
   CONTACT HERO — MOBILE
======================================== */

@media (max-width: 600px) {

  .contact-page .contact-hero {
    padding: 70px 0 75px;
  }

  .contact-page .contact-hero-inner {
    width: calc(100% - 40px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .contact-page .contact-eyebrow {
    margin-bottom: 22px;
    font-size: 9px;
    letter-spacing: 2.5px;
  }

  .contact-page .contact-hero-main h1 {
    font-size: 58px;
    line-height: 0.95;
    letter-spacing: -3px;
  }

  .contact-page .contact-intro {
    max-width: 100%;
    margin-top: 28px;

    font-size: 14px;
    line-height: 1.7;
  }

  .contact-page .contact-hero-info {
    width: 100%;
  }

  .contact-page .contact-info-row {
    grid-template-columns: 42px 1fr;
    gap: 14px;
    padding: 24px 0;
  }

  .contact-page .contact-info-row a,
  .contact-page .contact-info-row p {
    font-size: 16px;
  }
}







/* =====================================================
   CONTACT — SUCCESS MODAL
===================================================== */

.contact-success-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;

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

  padding: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-success-modal.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.contact-success-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(8, 12, 16, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.contact-success-dialog {
  position: relative;
  z-index: 2;

  width: min(100%, 480px);
  padding: 54px 46px 42px;

  background: #111820;
  color: #fff;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);

  transform: translateY(18px) scale(0.98);
  transition: transform 0.35s ease;
}

.contact-success-modal.active .contact-success-dialog {
  transform: translateY(0) scale(1);
}

.contact-success-close {
  position: absolute;
  top: 18px;
  right: 20px;

  width: 36px;
  height: 36px;

  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);

  font-size: 28px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;
}

.contact-success-icon {
  width: 52px;
  height: 52px;

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

  margin-bottom: 28px;

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

  font-size: 21px;
}

.contact-success-label {
  display: block;
  margin-bottom: 14px;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;

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

.contact-success-dialog h3 {
  margin: 0 0 14px;

  font-size: 30px;
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.contact-success-dialog p {
  margin: 0 0 32px;

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

  font-size: 14px;
  line-height: 1.7;
}

.contact-success-ok {
  width: 100%;
  min-height: 54px;

  border: 0;
  background: #fff;
  color: #111820;

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

  cursor: pointer;

  transition: opacity 0.2s ease;
}

.contact-success-ok:hover {
  opacity: 0.88;
}

/* PHONE */
@media (max-width: 600px) {

  .contact-success-modal {
    padding: 20px;
  }

  .contact-success-dialog {
    width: 100%;
    padding: 46px 28px 30px;
  }

  .contact-success-dialog h3 {
    font-size: 25px;
  }

  .contact-success-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 24px;
  }
}









/* =====================================================
   BLOG PAGE — HERO
===================================================== */

.blog-page {
    background: #ffffff;
}

.blog-hero {
    width: 100%;
    padding: 100px 0 95px;
    border-bottom: 1px solid #eceeef;
}

.blog-hero-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}

.blog-hero-label {
    margin-bottom: 24px;
    color: #8a8f94;

    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-hero h1 {
    max-width: 800px;
    margin: 0;

    color: #111820;

    font-size: 72px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -3px;
}

.blog-hero p {
    max-width: 560px;
    margin: 30px 0 0;

    color: #6d7277;

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


/* TABLET */

@media (max-width: 1180px) {

    .blog-hero {
        padding: 80px 0;
    }

    .blog-hero-inner {
        width: calc(100% - 70px);
    }

    .blog-hero h1 {
        font-size: 60px;
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .blog-hero {
        padding: 60px 0 58px;
    }

    .blog-hero-inner {
        width: calc(100% - 34px);
    }

    .blog-hero-label {
        margin-bottom: 18px;
        font-size: 10px;
    }

    .blog-hero h1 {
        font-size: 43px;
        line-height: 1.02;
        letter-spacing: -2px;
    }

    .blog-hero p {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.65;
    }
}










/* =====================================================
   BLOG — ARTICLES
===================================================== */

.blog-articles {
    width: 100%;
    padding: 90px 0 110px;
    background: #ffffff;
}

.blog-articles-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}


/* SECTION HEADER */

.blog-section-head {
    margin-bottom: 42px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;
}

.blog-section-label {
    display: block;
    margin-bottom: 12px;

    color: #8a8f94;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-section-head h2 {
    margin: 0;

    color: #111820;

    font-size: 38px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -1.5px;
}

.blog-all-link {
    padding-bottom: 4px;

    color: #111820;

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

    border-bottom: 1px solid #bfc2c4;
}


/* MAIN GRID */

.blog-articles-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);

    gap: 46px;
}


/* FEATURED ARTICLE */

.blog-card-featured {
    min-width: 0;
}

.blog-card-image {
    display: block;

    width: 100%;
    height: 430px;

    overflow: hidden;
    background: #f0f1f2;
}

.blog-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.blog-card-featured:hover .blog-card-image img {
    transform: scale(1.025);
}

.blog-card-content {
    padding-top: 26px;
}


/* META */

.blog-card-meta {
    margin-bottom: 14px;

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

    color: #909499;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.3px;
}

.blog-card-content h3 {
    max-width: 760px;
    margin: 0;

    color: #111820;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -1px;
}

.blog-card-content p {
    max-width: 690px;
    margin: 17px 0 0;

    color: #6d7277;

    font-size: 14px;
    line-height: 1.7;
}

.blog-card-link {
    display: inline-block;
    margin-top: 22px;

    color: #111820;

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


/* SIDE ARTICLES */

.blog-side-list {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.blog-card-small {
    padding-bottom: 34px;

    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);

    gap: 22px;

    border-bottom: 1px solid #e6e7e8;
}

.blog-card-small:last-child {
    border-bottom: 0;
}

.blog-small-image {
    display: block;

    width: 180px;
    height: 140px;

    overflow: hidden;
    background: #f0f1f2;
}

.blog-small-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.blog-card-small:hover .blog-small-image img {
    transform: scale(1.035);
}

.blog-small-content {
    min-width: 0;
}

.blog-small-content h3 {
    margin: 0;

    color: #111820;

    font-size: 19px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.blog-small-content .blog-card-link {
    margin-top: 17px;
}


/* =====================================================
   BLOG ARTICLES — TABLET
===================================================== */

@media (max-width: 1180px) {

    .blog-articles {
        padding: 75px 0 90px;
    }

    .blog-articles-inner {
        width: calc(100% - 70px);
    }

    .blog-articles-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .blog-card-image {
        height: 420px;
    }

    .blog-side-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .blog-card-small {
        display: block;
        padding-bottom: 25px;
    }

    .blog-small-image {
        width: 100%;
        height: 230px;
        margin-bottom: 20px;
    }
}


/* =====================================================
   BLOG ARTICLES — MOBILE
===================================================== */

@media (max-width: 720px) {

    .blog-articles {
        padding: 58px 0 70px;
    }

    .blog-articles-inner {
        width: calc(100% - 34px);
    }

    .blog-section-head {
        margin-bottom: 30px;
        align-items: flex-start;
    }

    .blog-section-head h2 {
        font-size: 30px;
    }

    .blog-all-link {
        display: none;
    }

    .blog-card-image {
        height: 250px;
    }

    .blog-card-content {
        padding-top: 21px;
    }

    .blog-card-content h3 {
        font-size: 24px;
    }

    .blog-card-content p {
        font-size: 13px;
    }

    .blog-side-list {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .blog-card-small {
        display: block;
        padding-bottom: 30px;
    }

    .blog-small-image {
        width: 100%;
        height: 220px;
        margin-bottom: 19px;
    }

    .blog-small-content h3 {
        font-size: 20px;
    }
}














/* =====================================================
   BLOG — MORE ARTICLES
===================================================== */

.blog-more {
    width: 100%;
    padding: 100px 0 120px;
    background: #f6f7f7;
    border-top: 1px solid #eceeef;
}

.blog-more-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}


/* HEADER */

.blog-more-head {
    margin-bottom: 42px;
}

.blog-more-head h2 {
    margin: 0;

    color: #111820;

    font-size: 38px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -1.5px;
}


/* GRID */

.blog-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}


/* CARD */

.blog-more-card {
    min-width: 0;
}

.blog-more-image {
    display: block;

    width: 100%;
    height: 280px;

    margin-bottom: 22px;

    overflow: hidden;
    background: #e9ebec;
}

.blog-more-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.45s ease;
}

.blog-more-card:hover .blog-more-image img {
    transform: scale(1.03);
}

.blog-more-card .blog-card-meta {
    margin-bottom: 13px;
}

.blog-more-card h3 {
    max-width: 390px;
    margin: 0;

    color: #111820;

    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.blog-more-card p {
    max-width: 390px;
    margin: 15px 0 0;

    color: #73787d;

    font-size: 13px;
    line-height: 1.7;
}

.blog-more-card .blog-card-link {
    margin-top: 19px;
}


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

@media (max-width: 1180px) {

    .blog-more {
        padding: 80px 0 95px;
    }

    .blog-more-inner {
        width: calc(100% - 70px);
    }

    .blog-more-grid {
        gap: 24px;
    }

    .blog-more-image {
        height: 230px;
    }

    .blog-more-card h3 {
        font-size: 20px;
    }
}


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

@media (max-width: 720px) {

    .blog-more {
        padding: 60px 0 75px;
    }

    .blog-more-inner {
        width: calc(100% - 34px);
    }

    .blog-more-head {
        margin-bottom: 30px;
    }

    .blog-more-head h2 {
        font-size: 30px;
    }

    .blog-more-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .blog-more-image {
        height: 230px;
    }

    .blog-more-card h3 {
        max-width: none;
        font-size: 21px;
    }

    .blog-more-card p {
        max-width: none;
    }
}










/* =====================================================
   BLOG — PREMIUM CTA
===================================================== */

.blog-cta {
    width: 100%;
    padding: 0 0 110px;
    background: #f6f7f7;
}

.blog-cta-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    min-height: 330px;

    margin: 0 auto;
    padding: 60px 65px;

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

    background: #111820;
    color: #ffffff;
}


/* LEFT */

.blog-cta-content {
    max-width: 650px;
}

.blog-cta-label {
    display: block;
    margin-bottom: 20px;

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

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-cta-content h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1.7px;
}

.blog-cta-content p {
    max-width: 520px;
    margin: 22px 0 0;

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

    font-size: 14px;
    line-height: 1.7;
}


/* RIGHT */

.blog-cta-action {
    min-width: 245px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.blog-cta-button {
    width: 100%;
    min-height: 55px;

    padding: 0 22px;

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

    background: #ffffff;
    color: #111820;

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

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.blog-cta-button:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.blog-cta-button span {
    font-size: 18px;
}

.blog-cta-phone {
    color: rgba(255, 255, 255, 0.62);

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


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

@media (max-width: 1180px) {

    .blog-cta {
        padding-bottom: 90px;
    }

    .blog-cta-inner {
        width: calc(100% - 70px);

        padding: 55px 50px;
    }

    .blog-cta-content h2 {
        font-size: 38px;
    }
}


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

@media (max-width: 720px) {

    .blog-cta {
        padding-bottom: 55px;
    }

    .blog-cta-inner {
        width: calc(100% - 34px);
        min-height: 0;

        padding: 45px 28px;

        flex-direction: column;
        align-items: stretch;
        gap: 38px;
    }

    .blog-cta-content h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .blog-cta-content p {
        font-size: 13px;
    }

    .blog-cta-action {
        width: 100%;
        min-width: 0;
    }

    .blog-cta-button {
        width: 100%;
    }
}















/* =====================================================
   BLOG DETAIL — HERO
===================================================== */

.blog-detail-page {
    background: #ffffff;
}

.blog-detail-hero {
    width: 100%;
    padding: 75px 0 100px;
}

.blog-detail-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}

.blog-detail-back {
    display: inline-block;
    margin-bottom: 55px;

    color: #777d82;
    font-size: 12px;
    font-weight: 500;
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 24px;

    color: #8b9095;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
}

.blog-detail-hero h1 {
    max-width: 1000px;
    margin: 0;

    color: #111820;
    font-size: clamp(48px, 5vw, 72px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: -0.045em;
}

.blog-detail-lead {
    max-width: 650px;
    margin: 30px 0 0;

    color: #6d7277;
    font-size: 16px;
    line-height: 1.75;
}

.blog-detail-cover {
    width: 100%;
    height: 580px;

    margin-top: 65px;
    overflow: hidden;

    background: #eef0f1;
}

.blog-detail-cover img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;
}


/* TABLET */

@media (max-width: 1180px) {

    .blog-detail-hero {
        padding: 65px 0 85px;
    }

    .blog-detail-inner {
        width: calc(100% - 70px);
    }

    .blog-detail-back {
        margin-bottom: 45px;
    }

    .blog-detail-cover {
        height: 460px;
        margin-top: 55px;
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .blog-detail-hero {
        padding: 45px 0 65px;
    }

    .blog-detail-inner {
        width: calc(100% - 34px);
    }

    .blog-detail-back {
        margin-bottom: 38px;
    }

    .blog-detail-meta {
        flex-wrap: wrap;
        gap: 8px 14px;
        margin-bottom: 20px;
    }

    .blog-detail-hero h1 {
        font-size: 39px;
        line-height: 1.04;
        letter-spacing: -0.04em;
    }

    .blog-detail-lead {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.7;
    }

    .blog-detail-cover {
        height: 260px;
        margin-top: 40px;
    }
}











/* =====================================================
   BLOG DETAIL — ARTICLE CONTENT
===================================================== */

.blog-detail-article {
    width: 100%;
    padding: 0 0 120px;
    background: #ffffff;
}

.blog-detail-article-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
}

.blog-detail-content {
    max-width: 900px;
    margin: 0 auto;
}

.blog-detail-intro {
    margin: 0 0 70px;
    padding-bottom: 55px;

    color: #252b30;
    font-size: 21px;
    line-height: 1.7;
    font-weight: 400;

    border-bottom: 1px solid #e5e7e8;
}


/* ARTICLE POINT */

.blog-detail-point {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 28px;

    padding: 45px 0;

    border-bottom: 1px solid #e5e7e8;
}

.blog-detail-number {
    padding-top: 5px;

    color: #9a9ea2;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.blog-detail-point h2 {
    max-width: 700px;
    margin: 0;

    color: #111820;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.blog-detail-point p {
    max-width: 700px;
    margin: 18px 0 0;

    color: #6d7277;
    font-size: 15px;
    line-height: 1.8;
}


/* TABLET */

@media (max-width: 1180px) {

    .blog-detail-article {
        padding-bottom: 95px;
    }

    .blog-detail-article-inner {
        width: calc(100% - 70px);
    }

    .blog-detail-content {
        max-width: 820px;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .blog-detail-article {
        padding-bottom: 70px;
    }

    .blog-detail-article-inner {
        width: calc(100% - 34px);
    }

    .blog-detail-intro {
        margin-bottom: 35px;
        padding-bottom: 35px;

        font-size: 18px;
        line-height: 1.65;
    }

    .blog-detail-point {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;

        padding: 32px 0;
    }

    .blog-detail-number {
        font-size: 10px;
    }

    .blog-detail-point h2 {
        font-size: 23px;
        line-height: 1.3;
    }

    .blog-detail-point p {
        margin-top: 14px;

        font-size: 14px;
        line-height: 1.7;
    }

}








/* =====================================================
   BLOG DETAIL — NEXT ARTICLE
===================================================== */

.blog-detail-next {
    width: 100%;
    padding: 0 0 110px;
    background: #ffffff;
}

.blog-detail-next-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    margin: 0 auto;
    padding-top: 45px;
    border-top: 1px solid #dfe2e4;
}

.blog-detail-next-label {
    display: block;
    margin-bottom: 28px;

    color: #92979b;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-detail-next-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;

    padding: 40px 0;

    color: #111820;
    border-bottom: 1px solid #dfe2e4;
}

.blog-detail-next-text {
    max-width: 850px;
}

.blog-detail-next-category {
    display: block;
    margin-bottom: 15px;

    color: #92979b;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.blog-detail-next-text h2 {
    margin: 0;

    font-size: 38px;
    line-height: 1.18;
    font-weight: 500;
    letter-spacing: -1.3px;
}

.blog-detail-next-arrow {
    flex-shrink: 0;

    font-size: 38px;
    font-weight: 300;

    transition: transform 0.25s ease;
}

.blog-detail-next-link:hover .blog-detail-next-arrow {
    transform: translateX(8px);
}


/* TABLET */

@media (max-width: 1180px) {

    .blog-detail-next {
        padding-bottom: 90px;
    }

    .blog-detail-next-inner {
        width: calc(100% - 70px);
    }

    .blog-detail-next-text h2 {
        font-size: 34px;
    }

}


/* MOBILE */

@media (max-width: 720px) {

    .blog-detail-next {
        padding-bottom: 65px;
    }

    .blog-detail-next-inner {
        width: calc(100% - 34px);
        padding-top: 35px;
    }

    .blog-detail-next-label {
        margin-bottom: 20px;
    }

    .blog-detail-next-link {
        gap: 20px;
        padding: 28px 0;
    }

    .blog-detail-next-text h2 {
        font-size: 25px;
        line-height: 1.25;
        letter-spacing: -0.7px;
    }

    .blog-detail-next-arrow {
        font-size: 28px;
    }

}










/* =====================================================
   BLOG DETAIL — CTA
===================================================== */

.blog-detail-cta {
    width: 100%;
    padding: 0 0 110px;
    background: #ffffff;
}

.blog-detail-cta-inner {
    width: calc(100% - 140px);
    max-width: 1500px;
    min-height: 330px;
    margin: 0 auto;
    padding: 60px 65px;

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

    background: #111820;
    color: #ffffff;
}

.blog-detail-cta-content {
    max-width: 650px;
}

.blog-detail-cta-label {
    display: block;
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.blog-detail-cta-content h2 {
    margin: 0;

    font-size: 42px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -1.7px;
}

.blog-detail-cta-content p {
    max-width: 520px;
    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    line-height: 1.7;
}

.blog-detail-cta-action {
    min-width: 245px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.blog-detail-cta-button {
    width: 100%;
    min-height: 55px;
    padding: 0 22px;

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

    background: #ffffff;
    color: #111820;

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

    transition: transform 0.2s ease, opacity 0.2s ease;
}

.blog-detail-cta-button:hover {
    transform: translateY(-2px);
    opacity: 0.92;
}

.blog-detail-cta-button span {
    font-size: 18px;
}

.blog-detail-cta-phone {
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
    font-weight: 500;
}


/* TABLET */

@media (max-width: 1180px) {

    .blog-detail-cta {
        padding-bottom: 90px;
    }

    .blog-detail-cta-inner {
        width: calc(100% - 70px);
        padding: 55px 50px;
    }

    .blog-detail-cta-content h2 {
        font-size: 38px;
    }
}


/* MOBILE */

@media (max-width: 720px) {

    .blog-detail-cta {
        padding-bottom: 55px;
    }

    .blog-detail-cta-inner {
        width: calc(100% - 34px);
        min-height: 0;
        padding: 45px 28px;

        flex-direction: column;
        align-items: stretch;
        gap: 38px;
    }

    .blog-detail-cta-content h2 {
        font-size: 31px;
        letter-spacing: -1px;
    }

    .blog-detail-cta-content p {
        font-size: 13px;
    }

    .blog-detail-cta-action {
        width: 100%;
        min-width: 0;
    }

    .blog-detail-cta-button {
        width: 100%;
    }
}













/* =====================================================
   GLOBAL HEADER ORDER MODAL
===================================================== */

.global-order-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;

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

    padding: 24px;
}

.global-order-modal.show {
    display: flex;
}

.global-order-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 12, 16, 0.56);
    backdrop-filter: blur(8px);
}

.global-order-dialog {
    position: relative;
    z-index: 2;

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

    padding: 42px 38px 38px;

    background: #ffffff;
    color: #111820;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.22);
}

.global-order-close {
    position: absolute;
    top: 18px;
    right: 20px;

    width: 34px;
    height: 34px;

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

    border: 0;
    background: transparent;

    color: #777d82;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

.global-order-label {
    display: block;
    margin-bottom: 14px;

    color: #969b9f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.global-order-dialog h2 {
    margin: 0;

    color: #111820;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -1px;
}

.global-order-dialog > p {
    max-width: 360px;
    margin: 16px 0 30px;

    color: #6d7277;
    font-size: 14px;
    line-height: 1.65;
}

#globalOrderForm {
    display: flex;
    flex-direction: column;
}

#globalOrderForm label {
    margin-bottom: 8px;

    color: #4f555a;
    font-size: 12px;
    font-weight: 600;
}

#globalOrderForm input {
    width: 100%;
    height: 50px;

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

    border: 1px solid #dfe2e4;
    border-radius: 9px;

    background: #ffffff;
    color: #111820;

    font-size: 14px;
    outline: none;

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

#globalOrderForm input:focus {
    border-color: #111820;

    box-shadow:
        0 0 0 3px rgba(17, 24, 32, 0.06);
}

.global-order-submit {
    width: 100%;
    min-height: 54px;

    margin-top: 5px;
    padding: 0 20px;

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

    border: 0;
    border-radius: 9px;

    background: #111820;
    color: #ffffff;

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

    cursor: pointer;
}

.global-order-submit span {
    font-size: 18px;
}

@media (max-width: 720px) {

    .global-order-modal {
        padding: 17px;
    }

    .global-order-dialog {
        padding: 38px 24px 28px;
        border-radius: 15px;
    }

    .global-order-dialog h2 {
        font-size: 29px;
    }

}











/* =====================================================
   GLOBAL ORDER — SUCCESS MODAL
===================================================== */

.global-order-success {
    position: fixed;
    inset: 0;
    z-index: 5100;

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

    padding: 24px;
}

.global-order-success.show {
    display: flex;
}

.global-order-success-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 12, 16, 0.56);
    backdrop-filter: blur(8px);
}

.global-order-success-dialog {
    position: relative;
    z-index: 2;

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

    padding: 46px 36px 34px;

    text-align: center;

    background: #ffffff;
    color: #111820;

    border-radius: 18px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.22);
}

.global-order-success-icon {
    width: 54px;
    height: 54px;

    margin: 0 auto 22px;

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

    border-radius: 50%;

    background: #111820;
    color: #ffffff;

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

.global-order-success-label {
    display: block;
    margin-bottom: 12px;

    color: #969b9f;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.global-order-success-dialog h3 {
    margin: 0;

    color: #111820;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.8px;
}

.global-order-success-dialog p {
    max-width: 330px;
    margin: 16px auto 28px;

    color: #6d7277;
    font-size: 14px;
    line-height: 1.65;
}

.global-order-success-btn {
    width: 100%;
    min-height: 52px;

    border: 0;
    border-radius: 9px;

    background: #111820;
    color: #ffffff;

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

    cursor: pointer;
}

@media (max-width: 720px) {

    .global-order-success {
        padding: 17px;
    }

    .global-order-success-dialog {
        padding: 40px 24px 28px;
        border-radius: 15px;
    }

    .global-order-success-dialog h3 {
        font-size: 27px;
    }
}














/* =========================
   NEGA BBA CARS
========================= */

.why-bba {
    padding: 110px 24px;
    background: #ffffff;
}

.why-bba-container {
    max-width: 1440px;
    margin: 0 auto;
}

.why-bba-heading {
    max-width: 760px;
    margin-bottom: 56px;
}

.why-bba-kicker {
    display: inline-block;
    margin-bottom: 16px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;

    color: #7a7a7a;
}

.why-bba-heading h2 {
    margin: 0;

    font-size: 54px;
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.035em;

    color: #111111;
}

.why-bba-heading p {
    max-width: 620px;

    margin: 24px 0 0;

    font-size: 17px;
    line-height: 1.7;

    color: #707070;
}

.why-bba-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.why-bba-card {
    min-height: 280px;

    padding: 30px;

    border: 1px solid #e9e9e9;
    border-radius: 24px;

    background: #fafafa;

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

.why-bba-card:hover {
    transform: translateY(-5px);

    border-color: #d8d8d8;

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

.why-bba-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 54px;

    border: 1px solid #dddddd;
    border-radius: 14px;

    background: #ffffff;

    font-size: 20px;
    color: #111111;
}

.why-bba-card h3 {
    margin: 0 0 14px;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;

    color: #111111;
}

.why-bba-card p {
    margin: 0;

    font-size: 15px;
    line-height: 1.65;

    color: #777777;
}








/* =========================
   NEGA BBA CARS — TABLET
========================= */

@media (max-width: 1024px) {

    .why-bba {
        padding: 80px 24px;
    }

    .why-bba-heading {
        margin-bottom: 42px;
    }

    .why-bba-heading h2 {
        font-size: 44px;
    }

    .why-bba-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .why-bba-card {
        min-height: 240px;
        padding: 26px;
    }

    .why-bba-icon {
        margin-bottom: 38px;
    }
}


/* =========================
   NEGA BBA CARS — MOBILE
========================= */

@media (max-width: 600px) {

    .why-bba {
        padding: 64px 18px;
    }

    .why-bba-heading {
        margin-bottom: 34px;
    }

    .why-bba-kicker {
        margin-bottom: 12px;
        font-size: 11px;
    }

    .why-bba-heading h2 {
        font-size: 36px;
        line-height: 1.06;
    }

    .why-bba-heading p {
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.6;
    }

    .why-bba-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .why-bba-card {
        min-height: auto;
        padding: 24px;
        border-radius: 20px;
    }

    .why-bba-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 30px;
    }

    .why-bba-card h3 {
        font-size: 19px;
    }

    .why-bba-card p {
        font-size: 14px;
    }
}









/* =========================
   HOME — MASHHUR BRENDLAR
========================= */

.home-brands {
    padding: 110px 0;
    background: #ffffff;
    overflow: hidden;
}

.home-brands-container {
    max-width: 1440px;
    margin: 0 auto;
}

.home-brands-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;

    padding: 0 24px;
    margin-bottom: 56px;
}

.home-brands-kicker {
    display: inline-block;
    margin-bottom: 16px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;

    color: #777777;
}

.home-brands-header h2 {
    margin: 0;

    font-size: 54px;
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.035em;

    color: #111111;
}

.home-brands-header > p {
    max-width: 430px;
    margin: 0 0 5px;

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

    color: #777777;
}

.brands-marquee {
    position: relative;

    width: 100%;
    overflow: hidden;

    padding: 24px 0;
}

.brands-track {
    display: flex;
    width: max-content;

    animation: brands-scroll 32s linear infinite;
}

.brand-logo-item {
    flex: 0 0 190px;
    height: 150px;

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

    gap: 16px;

    border-right: 1px solid #e8e8e8;
}

.brand-logo-item img {
    width: 90px;
    height: 64px;

    object-fit: contain;
    object-position: center;

    display: block;

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

    opacity: 0.9;
}

.brand-logo-item:hover img {
    transform: scale(1.06);
    opacity: 1;
}

.brand-logo-item span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;

    color: #333333;
}

@keyframes brands-scroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}







.brands-marquee::before,
.brands-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    width: 110px;

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

.brands-marquee::before {
    left: 0;
    background: linear-gradient(
        to right,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}

.brands-marquee::after {
    right: 0;
    background: linear-gradient(
        to left,
        #ffffff 0%,
        rgba(255, 255, 255, 0) 100%
    );
}










/* =========================
   BRENDLAR — TABLET
========================= */

@media (max-width: 1024px) {

    .home-brands {
        padding: 80px 0;
    }

    .home-brands-header {
        padding: 0 24px;
        margin-bottom: 42px;
        gap: 35px;
    }

    .home-brands-header h2 {
        font-size: 44px;
    }

    .home-brands-header > p {
        max-width: 340px;
    }

    .brand-logo-item {
        flex: 0 0 165px;
        height: 135px;
    }

    .brand-logo-item img {
        width: 82px;
        height: 58px;
    }

    .brands-marquee::before,
    .brands-marquee::after {
        width: 70px;
    }

    .brands-track {
        animation-duration: 28s;
    }
}






/* =========================
   BRENDLAR — MOBILE
========================= */

@media (max-width: 600px) {

    .home-brands {
        padding: 64px 0;
    }

    .home-brands-header {
        display: block;
        padding: 0 18px;
        margin-bottom: 32px;
    }

    .home-brands-kicker {
        margin-bottom: 12px;
        font-size: 11px;
    }

    .home-brands-header h2 {
        font-size: 36px;
        line-height: 1.06;
    }

    .home-brands-header > p {
        max-width: 100%;
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.6;
    }

    .brands-marquee {
        padding: 16px 0;
    }

    .brand-logo-item {
        flex: 0 0 145px;
        height: 120px;
        gap: 12px;
    }

    .brand-logo-item img {
        width: 74px;
        height: 54px;
    }

    .brand-logo-item span {
        font-size: 11px;
    }

    .brands-marquee::before,
    .brands-marquee::after {
        width: 42px;
    }

    .brands-track {
        animation-duration: 24s;
    }
}







/* =========================
   FOOTER
========================= */

.site-footer {
    padding: 80px 24px 28px;
    background: #111111;
    color: #ffffff;
}

.site-footer-container {
    max-width: 1440px;
    margin: 0 auto;
}

.site-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 80px;

    padding-bottom: 70px;
}

.site-footer-brand {
    max-width: 360px;
}

.footer-logo {
    display: inline-block;

    margin-bottom: 24px;

    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;

    color: #ffffff;
    text-decoration: none;
}

.site-footer-brand p {
    max-width: 320px;
    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #929292;
}

.site-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: 70px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin: 0 0 24px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #666666;
}

.footer-column a {
    margin-bottom: 14px;

    font-size: 14px;

    color: #d4d4d4;
    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-column a:hover {
    color: #ffffff;
}

.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding-top: 26px;

    border-top: 1px solid #292929;
}

.site-footer-bottom p,
.site-footer-bottom span {
    margin: 0;

    font-size: 12px;
    color: #666666;
}










/* =========================
   FOOTER — TABLET
========================= */

@media (max-width: 1024px) {

    .site-footer {
        padding: 64px 24px 26px;
    }

    .site-footer-top {
        gap: 50px;
        padding-bottom: 55px;
    }

    .site-footer-brand {
        max-width: 280px;
    }

    .site-footer-nav {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }

    .footer-column h3 {
        margin-bottom: 20px;
    }

    .site-footer-bottom {
        padding-top: 22px;
    }
}


/* =========================
   FOOTER — MOBILE
========================= */

@media (max-width: 600px) {

    .site-footer {
        padding: 52px 18px 24px;
    }

    .site-footer-top {
        display: block;
        padding-bottom: 42px;
    }

    .site-footer-brand {
        max-width: 100%;
        margin-bottom: 42px;
    }

    .footer-logo {
        margin-bottom: 18px;
        font-size: 22px;
    }

    .site-footer-brand p {
        max-width: 290px;
        font-size: 14px;
        line-height: 1.65;
    }

    .site-footer-nav {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 24px;
    }

    .footer-column:last-child {
        grid-column: 1 / -1;
    }

    .footer-column h3 {
        margin-bottom: 18px;
        font-size: 11px;
    }

    .footer-column a {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .site-footer-bottom {
        display: block;
        padding-top: 22px;
    }

    .site-footer-bottom p {
        margin-bottom: 10px;
    }

    .site-footer-bottom p,
    .site-footer-bottom span {
        font-size: 11px;
        line-height: 1.5;
    }
}




/* =========================
   HEADER — TABLET
========================= */

@media (max-width: 1024px) {

    .desktop-nav {
        display: none;
    }

    .header-phone {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .site-header-inner {
        justify-content: space-between;
    }
}









/* =====================================================
   HOME — NASIYA PREMIUM
===================================================== */

.home-nasiya {
    padding: 90px 0;
    background: #f7f7f7;
}

.home-nasiya-inner {
    width: min(1180px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: center;

    padding: 40px 0;

background: transparent;
border: none;
border-radius: 0;
}


.home-nasiya-card {
    transform: translateY(14px);
}


/* LEFT */

.home-nasiya-label {
    display: block;
    margin-bottom: 20px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #888;
}

.home-nasiya-content h2 {
    margin: 0;

    font-size: 46px;
    line-height: 1.08;
    letter-spacing: -1.8px;
    font-weight: 700;
    color: #111;
}

.home-nasiya-text {
    max-width: 540px;
    margin: 22px 0 0;

    font-size: 15px;
    line-height: 1.7;
    color: #777;
}


/* FEATURES */

.home-nasiya-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;

    margin-top: 38px;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
}

.home-nasiya-feature {
    padding: 22px 18px 22px 0;
}

.home-nasiya-feature + .home-nasiya-feature {
    padding-left: 22px;
    border-left: 1px solid #e9e9e9;
}

.home-nasiya-feature strong {
    display: block;

    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.home-nasiya-feature span {
    font-size: 12px;
    color: #888;
}


/* BUTTON */

.home-nasiya-btn {
    display: inline-flex;
    align-items: center;
    gap: 28px;

    margin-top: 32px;
    padding: 15px 20px;

    background: #111;
    color: #fff;
    border-radius: 10px;

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

    transition: 0.25s ease;
}

.home-nasiya-btn span {
    font-size: 18px;
    line-height: 1;
}

.home-nasiya-btn:hover {
    transform: translateY(-2px);
    background: #292929;
}


/* RIGHT PREMIUM CARD */

.home-nasiya-card {
    min-height: 430px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    color: #fff;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255,255,255,0.10),
            transparent 38%
        ),
        #111;

    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.16);
}

.home-nasiya-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #999;
}

.home-nasiya-card-main {
    margin: auto 0;
}

.home-nasiya-card-label {
    margin-bottom: 15px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #777;
}

.home-nasiya-card-main h3 {
    margin: 0 0 32px;

    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.8px;
}


/* CARD LIST */

.home-nasiya-card-list > div {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
    align-items: start;

    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.home-nasiya-card-list > div > span {
    font-size: 11px;
    color: #666;
}

.home-nasiya-card-list p {
    margin: 0;

    font-size: 11px;
    line-height: 1.5;
    color: #777;
}

.home-nasiya-card-list strong {
    display: block;
    margin-bottom: 2px;

    font-size: 13px;
    font-weight: 600;
    color: #fff;
}


/* CARD BOTTOM */

.home-nasiya-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);

    font-size: 11px;
    color: #777;
}

.home-nasiya-card-bottom strong {
    font-size: 15px;
    color: #fff;
}







.home-nasiya-features {
    gap: 12px;
    border: none;
}

.home-nasiya-feature {
    padding: 18px 20px;

    background: #ffffff;
    border: 1px solid #e9e9e9;
    border-radius: 14px;
}

.home-nasiya-feature + .home-nasiya-feature {
    padding-left: 20px;
    border-left: 1px solid #e9e9e9;
}

.home-nasiya-feature strong {
    font-size: 22px;
    margin-bottom: 7px;
}

.home-nasiya-feature span {
    font-size: 11px;
}











/* HOME NASIYA — NEW BLACK CARD */

.home-nasiya-card {
    min-height: 420px;
    padding: 30px 32px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,255,255,0.09),
            transparent 32%
        ),
        linear-gradient(145deg, #171717, #0d0d0d);

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;

    box-shadow: 0 24px 60px rgba(0,0,0,0.16);

    color: #fff;
}


/* TOP */

.home-nasiya-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: #9a9a9a;
}


/* MAIN */

.home-nasiya-card-hero {
    margin-top: 48px;
}

.home-nasiya-card-small {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #777;
}

.home-nasiya-big-number {
    font-size: 82px;
    line-height: 0.95;
    font-weight: 700;
    letter-spacing: -5px;
    color: #fff;
}

.home-nasiya-big-number span {
    margin-left: 4px;

    font-size: 34px;
    letter-spacing: -1px;
    color: #888;
}

.home-nasiya-card-hero p {
    max-width: 340px;

    margin: 18px 0 0;

    font-size: 12px;
    line-height: 1.6;
    color: #8c8c8c;
}


/* INFO */

.home-nasiya-card-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    margin-top: 32px;
}

.home-nasiya-card-info > div {
    padding: 16px 0;

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

.home-nasiya-card-info span {
    display: block;

    margin-bottom: 6px;

    font-size: 9px;
    letter-spacing: 1.2px;
    color: #666;
}

.home-nasiya-card-info strong {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}


/* BOTTOM */

.home-nasiya-card-bottom {
    margin-top: auto;

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

    padding-top: 18px;

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

    font-size: 11px;
    color: #888;
}

.home-nasiya-card-bottom span:last-child {
    font-size: 18px;
    color: #fff;
}












/* =====================================================
   HOME NASIYA — IPAD + MOBILE
===================================================== */


/* =========================
   IPAD
========================= */

@media (min-width: 721px) and (max-width: 1180px) {

    .home-nasiya {
        padding: 70px 0;
    }

    .home-nasiya-inner {
        width: calc(100% - 70px);

        grid-template-columns: 1fr 0.9fr;
        gap: 45px;

        padding: 30px 0;
    }

    .home-nasiya-content h2 {
        font-size: 40px;
        line-height: 1.08;
        letter-spacing: -1.4px;
    }

    .home-nasiya-text {
        font-size: 14px;
        line-height: 1.65;
    }

    .home-nasiya-features {
        gap: 8px;
        margin-top: 30px;
    }

    .home-nasiya-feature {
        min-width: 0;
        padding: 16px 12px;
    }

    .home-nasiya-feature + .home-nasiya-feature {
        padding-left: 12px;
    }

    .home-nasiya-feature strong {
        font-size: 18px;
        white-space: nowrap;
    }

    .home-nasiya-feature span {
        font-size: 10px;
        line-height: 1.4;
    }

    .home-nasiya-btn {
        margin-top: 26px;
    }

    .home-nasiya-card {
        min-width: 0;
        min-height: 390px;
        padding: 26px;

        transform: translateY(10px);
    }

    .home-nasiya-card-hero {
        margin-top: 38px;
    }

    .home-nasiya-big-number {
        font-size: 68px;
    }

    .home-nasiya-big-number span {
        font-size: 28px;
    }

    .home-nasiya-card-hero p {
        font-size: 11px;
    }

    .home-nasiya-card-info strong {
        font-size: 13px;
    }
}


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

@media (max-width: 720px) {

    .home-nasiya {
        padding: 55px 0;
    }

    .home-nasiya-inner {
        width: calc(100% - 36px);

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

        padding: 0;
    }

    .home-nasiya-content {
        width: 100%;
    }

    .home-nasiya-label {
        margin-bottom: 14px;

        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .home-nasiya-content h2 {
        font-size: 34px;
        line-height: 1.08;
        letter-spacing: -1.2px;
    }

    .home-nasiya-content h2 br {
        display: none;
    }

    .home-nasiya-text {
        margin-top: 17px;

        font-size: 13px;
        line-height: 1.65;
    }


    /* 3 SMALL CARDS */

    .home-nasiya-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        gap: 7px;
        margin-top: 26px;
    }

    .home-nasiya-feature {
        min-width: 0;
        padding: 14px 10px;
        border-radius: 11px;
    }

    .home-nasiya-feature + .home-nasiya-feature {
        padding-left: 10px;
    }

    .home-nasiya-feature strong {
        margin-bottom: 5px;

        font-size: 16px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .home-nasiya-feature span {
        display: block;

        font-size: 9px;
        line-height: 1.35;
    }


    /* BUTTON */

    .home-nasiya-btn {
        width: 100%;

        justify-content: space-between;

        margin-top: 20px;
        padding: 15px 17px;
    }


    /* BLACK CARD */

    .home-nasiya-card {
        width: 100%;
        min-width: 0;
        min-height: 390px;

        padding: 24px;

        border-radius: 20px;

        transform: none;
    }

    .home-nasiya-card-top {
        font-size: 9px;
    }

    .home-nasiya-card-hero {
        margin-top: 38px;
    }

    .home-nasiya-card-small {
        font-size: 9px;
    }

    .home-nasiya-big-number {
        font-size: 70px;
        letter-spacing: -4px;
    }

    .home-nasiya-big-number span {
        font-size: 28px;
    }

    .home-nasiya-card-hero p {
        max-width: 280px;

        margin-top: 15px;

        font-size: 11px;
    }

    .home-nasiya-card-info {
        gap: 12px;
        margin-top: 26px;
    }

    .home-nasiya-card-info strong {
        font-size: 13px;
    }

    .home-nasiya-card-bottom {
        font-size: 10px;
    }
}








/* =====================================================
   CARS PAGE — YANA KO‘RSATISH
===================================================== */

.catalog-load-more-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 42px;
    margin-bottom: 20px;
}

.catalog-load-more-btn {
    min-width: 190px;
    height: 52px;

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

    padding: 0 32px;

    border: 1px solid #111;
    border-radius: 12px;

    background: #111;
    color: #fff;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;

    cursor: pointer;

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

.catalog-load-more-btn:hover {
    background: #fff;
    color: #111;

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.10);
}

.catalog-load-more-btn:active {
    transform: translateY(0);
}


/* iPad */
@media (max-width: 1024px) {

    .catalog-load-more-wrap {
        margin-top: 34px;
    }

    .catalog-load-more-btn {
        min-width: 180px;
        height: 50px;
    }
}


/* Telefon */
@media (max-width: 600px) {

    .catalog-load-more-wrap {
        margin-top: 28px;
        margin-bottom: 10px;
        padding: 0 16px;
    }

    .catalog-load-more-btn {
        width: 100%;
        max-width: 360px;
        height: 50px;

        font-size: 14px;
        border-radius: 11px;
    }
}












/* =====================================================
   GLOBAL SCROLL FADE
===================================================== */

.scroll-fade {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.scroll-fade.show {
    opacity: 1;
    transform: translateY(0);
}









/* =====================================================
   BBA CARS — PREMIUM HERO SLIDER
===================================================== */

.hero-slider {
    position: relative;
    overflow: hidden;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 430px;
}


/* SLIDE */

.hero-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transform: translateX(35px);

    transition:
        opacity 0.85s ease,
        transform 0.85s ease,
        visibility 0.85s ease;

    pointer-events: none;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;

    transform: translateX(0);

    pointer-events: auto;
}


/* LABEL */

.hero-slide-label {
    display: inline-flex;
    align-items: center;

    min-height: 28px;

    margin-bottom: 15px;
    padding: 0 12px;

    border: 1px solid #dfe2e5;
    border-radius: 20px;

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

    color: #5d6267;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =====================================================
   SLIDE ICHIDAGI CONTENT ANIMATION
===================================================== */

.hero-slide .hero-content {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 0.7s ease 0.18s,
        transform 0.7s ease 0.18s;
}

.hero-slide.active .hero-content {
    opacity: 1;
    transform: translateY(0);
}


/* RASM ANIMATION */

.hero-slide .hero-car-image {
    opacity: 0;

    transform:
        translateX(45px)
        scale(1.025);

    transition:
        opacity 1s ease 0.1s,
        transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide.active .hero-car-image {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


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

.hero-arrow {
    position: absolute;
    top: 215px;

    width: 46px;
    height: 46px;

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

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);

    color: #111;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    z-index: 20;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.hero-arrow:hover {
    background: #ffffff;
    transform: scale(1.06);
}

.hero-arrow-prev {
    left: 22px;
}

.hero-arrow-next {
    right: 22px;
}


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

.hero-dots {
    position: absolute;

    left: 50%;
    top: 405px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 7px;

    z-index: 25;
}

.hero-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 20px;

    background: #c9cdd1;

    cursor: pointer;

    transition:
        width 0.35s ease,
        background 0.35s ease;
}

.hero-dot.active {
    width: 27px;
    background: #111;
}


/* =====================================================
   IPAD
===================================================== */

@media (max-width: 1180px) {

    .hero-slides {
        height: 350px;
    }

    .hero-arrow {
        top: 175px;

        width: 40px;
        height: 40px;

        font-size: 27px;
    }

    .hero-arrow-prev {
        left: 12px;
    }

    .hero-arrow-next {
        right: 12px;
    }

    .hero-dots {
        top: 328px;
    }
}


/* =====================================================
   TELEFON
===================================================== */

@media (max-width: 720px) {

    .hero-slides {
        height: 410px;
    }

    .hero-slide .hero-inner {
        height: 410px;
    }

    .hero-slide-label {
        margin-bottom: 11px;

        min-height: 24px;
        padding: 0 10px;

        font-size: 9px;
    }

    .hero-arrow {
        display: none;
    }

    .hero-dots {
        top: auto;
        bottom: 12px;
    }

    .hero-dot {
        width: 7px;
        height: 7px;
    }

    .hero-dot.active {
        width: 23px;
    }
}




/* HERO — FULL BACKGROUND IMAGE */

.hero-slide .hero-inner {
    position: relative;
    z-index: 2;
}

.hero-slide .hero-visual {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -1;
}

.hero-slide .hero-car-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 0;
}

/* Matn o‘qilishi uchun chap tomonda oq gradient */

.hero-slide::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
    90deg,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.68) 27%,
    rgba(255,255,255,0.25) 48%,
    rgba(255,255,255,0) 68%
);

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










/* =====================================================
   HERO — FULL WIDTH FIX
===================================================== */

.hero-slider {
    width: 100%;
    max-width: none;
}

.hero-slider .hero-slides,
.hero-slider .hero-slide {
    width: 100%;
    max-width: none;
}

.hero-slider .hero-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: clamp(24px, 6vw, 110px);
    padding-right: 0;
}

.hero-slider .hero-visual {
    left: 0;
    right: 0;
    width: 100%;
}

.hero-slider .hero-car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


/* =====================================================
   HERO IMAGE — REAL SIZE FIX
===================================================== */

.hero-slider .hero-car-image {
    width: 100% !important;
    height: 100% !important;

    max-width: none;

    object-fit: cover;
    object-position: center center;
}



/* =====================================================
   HERO — MOBILE IMAGE FIX
===================================================== */

@media (max-width: 720px) {

    .hero-slider .hero-car-image {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover;
        object-position: 68% center;
    }

}



/* =====================================================
   HERO — IPAD POSITION FIX
===================================================== */

@media (min-width: 721px) and (max-width: 1024px) {

    .hero-slider .hero-car-image {
        object-position: 62% center;
    }

    .hero-slider .hero-content {
        max-width: 46%;
    }

}




/* =====================================================
   CARS FILTER — DROPDOWN REAL Z-INDEX FIX
===================================================== */

.cars-page .catalog-filter-section {
    position: relative;
    z-index: 500;
    overflow: visible !important;
}

.cars-page .catalog-filter-bar {
    position: relative;
    z-index: 500;
    overflow: visible !important;
}

.cars-page .catalog-filter-select,
.cars-page .catalog-sort-select {
    position: relative;
    z-index: 501;
}

.cars-page .catalog-filter-bar .custom-select.open {
    z-index: 1000;
}

.cars-page .catalog-filter-bar .custom-select-menu {
    z-index: 9999 !important;
}









/* =====================================================
   CAR CARD — TAQQOSLASH
===================================================== */

.car-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
}

.car-compare-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 42px;
    padding: 0 16px;

    border: 1px solid #d9d9d9;
    border-radius: 10px;

    background: #fff;
    color: #222;

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

    cursor: pointer;

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

.car-compare-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-1px);
}

.car-compare-icon {
    font-size: 16px;
    line-height: 1;
}









/* =====================================================
   CARS — COMPARE BOTTOM BAR
===================================================== */

.compare-bar {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 30px);

    width: min(920px, calc(100% - 48px));

    background: rgba(17, 17, 17, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 9999;

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

.compare-bar.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.compare-bar-inner {
    min-height: 78px;
    padding: 14px 16px 14px 22px;

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

.compare-bar-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compare-bar-info strong {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.compare-bar-info span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
}

.compare-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.compare-clear-btn,
.compare-open-btn {
    height: 46px;
    padding: 0 20px;

    border-radius: 10px;

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

    cursor: pointer;
}

.compare-clear-btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
}

.compare-open-btn {
    border: 1px solid #fff;
    background: #fff;
    color: #111;
}

.compare-clear-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.compare-open-btn:hover {
    background: #eeeeee;
}








/* =====================================================
   COMPARE PAGE — DESKTOP
===================================================== */

.compare-page {
    background: #f7f7f5;
    color: #111;
}

.compare-main {
    min-height: 100vh;
}

.compare-container {
    width: min(1240px, calc(100% - 64px));
    margin: 0 auto;
}

/* HERO */

.compare-hero {
    padding: 72px 0 44px;
    background: #f7f7f5;
}

.compare-back-link {
    display: inline-flex;
    align-items: center;
    margin-bottom: 28px;

    color: #777;
    text-decoration: none;

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

    transition: color 0.2s ease;
}

.compare-back-link:hover {
    color: #111;
}

.compare-hero h1 {
    margin: 0;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -2.2px;
    font-weight: 600;
}

.compare-hero p {
    max-width: 620px;

    margin: 18px 0 0;

    color: #777;

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

/* COMPARISON AREA */

.compare-section {
    padding: 20px 0 100px;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    background: #fff;

    border: 1px solid #e5e5e5;
    border-radius: 20px;

    overflow: hidden;

    min-height: 420px;
}













/* =====================================================
   COMPARE PAGE — CAR CARDS
===================================================== */

.compare-car-card {
    min-width: 0;
    padding: 24px;

    background: #fff;

    border-right: 1px solid #e8e8e8;
}

.compare-car-card:last-child {
    border-right: none;
}

.compare-car-image {
    width: 100%;
    height: 240px;

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

    background: #f5f5f3;
    border-radius: 14px;

    overflow: hidden;
}

.compare-car-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.compare-car-content {
    padding-top: 20px;
}

.compare-car-content h2 {
    margin: 0;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;

    letter-spacing: -0.5px;
}

.compare-car-price {
    margin-top: 10px;

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

    color: #111;
}

.compare-car-details {
    display: inline-flex;
    margin-top: 18px;

    color: #777;

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

    text-decoration: none;

    transition: color 0.2s ease;
}

.compare-car-details:hover {
    color: #111;
}






/* =====================================================
   COMPARE PAGE — SPECIFICATIONS
===================================================== */

.compare-spec-list {
    margin-top: 24px;
    border-top: 1px solid #e8e8e8;
}

.compare-spec-row {
    min-height: 58px;

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

    padding: 12px 0;

    border-bottom: 1px solid #ededed;
}

.compare-spec-row span {
    color: #888;

    font-size: 12px;
    font-weight: 500;
}

.compare-spec-row strong {
    color: #111;

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

    text-align: right;
}

.compare-car-details {
    margin-top: 22px;
}




.compare-spec-group-title {
    margin-top: 24px;
    padding: 12px 0;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;

    color: #111;

    border-bottom: 1px solid #dcdcdc;
}

.compare-equipment-title {
    margin-top: 30px;
}

.compare-spec-row strong {
    max-width: 58%;
}

.compare-spec-row strong:has(+ *) {
    text-align: right;
}








/* Compare — remove button */

.compare-car-card {
    position: relative;
}

.compare-remove-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;

    width: 34px;
    height: 34px;

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

    border: 1px solid #e2e2e2;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);
    color: #111;

    font-size: 21px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

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

.compare-remove-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: scale(1.05);
}




/* Compare — dynamic columns */

.compare-grid[data-count="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-grid[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare-grid[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
}





/* =====================================================
   COMPARE — EMPTY STATE
===================================================== */

.compare-empty {
    grid-column: 1 / -1;

    width: 100%;
    min-height: 420px;

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

    padding: 60px 30px;
    text-align: center;
}

.compare-empty-icon {
    width: 54px;
    height: 54px;

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

    margin-bottom: 20px;

    border: 1px solid #dedede;
    border-radius: 50%;

    background: #f7f7f5;
    color: #111;

    font-size: 22px;
}

.compare-empty h3 {
    margin: 0 0 10px;

    color: #111;

    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.compare-empty p {
    max-width: 430px;

    margin: 0;

    color: #888;

    font-size: 14px;
    line-height: 1.6;
}

.compare-empty-btn {
    min-width: 180px;
    height: 48px;

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

    margin-top: 24px;
    padding: 0 24px;

    border-radius: 10px;

    background: #111;
    color: #fff;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.compare-empty-btn:hover {
    background: #292929;
    transform: translateY(-2px);
}


























/* =====================================================
   BBA CARS — FINAL MOBILE HEADER + HERO
   FINAL REFERENCE
===================================================== */

@media (max-width: 720px) {

    /* ================================
       PAGE
    ================================ */

    body {
        padding-top: 82px !important;
        background: #f6f9fc !important;
        overflow-x: hidden !important;
    }


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

    .site-header {
        position: fixed !important;

        top: 8px !important;
        left: 10px !important;
        right: 10px !important;

        width: auto !important;
        height: 70px !important;

        z-index: 1000 !important;

        border-radius: 20px !important;

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

        border:
            1px solid rgba(25, 55, 85, 0.06) !important;

        box-shadow:
            0 10px 30px rgba(30, 60, 90, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

        backdrop-filter:
            blur(20px) saturate(140%) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(140%) !important;
    }


    .header-container {
        width: 100% !important;
        height: 70px !important;

        padding: 0 12px !important;

        display: flex !important;
        align-items: center !important;

        gap: 7px !important;
    }


    .desktop-nav,
    .header-actions {
        display: none !important;
    }


    /* MENU */

    .mobile-menu-btn {
        order: 1 !important;

        width: 38px !important;
        height: 38px !important;

        flex: 0 0 38px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        border-radius: 11px !important;

        border:
            1px solid rgba(30, 65, 100, 0.06) !important;

        background: #f7fbff !important;

        color: #163753 !important;

        font-size: 21px !important;
        line-height: 1 !important;

        box-shadow:
            0 4px 12px rgba(30, 65, 100, 0.04) !important;
    }


    /* LOGO */

    .site-logo {
        order: 2 !important;

        position: static !important;

        transform: none !important;

        margin: 0 0 0 2px !important;

        color: #0c1c2d !important;

        font-size: 19px !important;
        line-height: 1 !important;

        font-weight: 850 !important;

        letter-spacing: 0.2px !important;

        white-space: nowrap !important;
    }


    /* RIGHT ICONS */

    .mobile-header-actions {
        order: 3 !important;

        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 4px !important;
    }


    .mobile-search-btn,
    .mobile-favorite-btn,
    .mobile-phone-btn {
        width: 35px !important;
        height: 35px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        border-radius: 10px !important;

        border:
            1px solid rgba(30, 65, 100, 0.06) !important;

        background: #f7fbff !important;

        color: #163753 !important;

        text-decoration: none !important;

        box-shadow:
            0 4px 12px rgba(30, 65, 100, 0.04) !important;
    }


    .mobile-search-btn {
        font-size: 17px !important;
    }

    .mobile-favorite-btn {
        font-size: 21px !important;
    }

    .mobile-phone-btn {
        font-size: 15px !important;
    }


    /* ================================
       OLD DESKTOP HERO OFF
    ================================ */

    .hero.hero-slider,
    .search-section {
        display: none !important;
    }


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

    .concept3-mobile-hero {
        display: block !important;

        position: relative !important;

        width: calc(100% - 20px) !important;
        height: 510px !important;

        margin: 10px auto 0 !important;

        overflow: hidden !important;

        border-radius: 22px !important;

        background:
            radial-gradient(
                circle at 85% 8%,
                rgba(255, 255, 255, 0.30) 0%,
                rgba(255, 255, 255, 0) 30%
            ),
            linear-gradient(
                180deg,
                #5b9fcd 0%,
                #7fb7d9 38%,
                #a8cce2 68%,
                #d9e9f3 100%
            ) !important;

        box-shadow:
            0 12px 30px rgba(35, 80, 120, 0.10) !important;
    }


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

    .concept3-mobile-content {
        position: relative !important;

        z-index: 10 !important;

        width: 100% !important;

        padding: 34px 18px 0 !important;
    }


    /* TITLE */

    .concept3-mobile-content h1 {
        max-width: 350px !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 30px !important;
        line-height: 1.05 !important;

        font-weight: 800 !important;

        letter-spacing: -1px !important;

        text-shadow:
            0 2px 12px rgba(20, 55, 85, 0.14) !important;
    }


    /* DESCRIPTION */

    .concept3-mobile-content p {
        max-width: 310px !important;

        margin: 12px 0 0 !important;

        color:
            rgba(255, 255, 255, 0.96) !important;

        font-size: 11px !important;
        line-height: 1.45 !important;

        font-weight: 500 !important;

        text-shadow:
            0 1px 8px rgba(20, 55, 85, 0.10) !important;
    }


    /* ================================
       SEARCH
    ================================ */

    .concept3-search {
        width: 100% !important;
        height: 50px !important;

        margin-top: 20px !important;

        padding: 0 10px 0 14px !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        border:
            1px solid rgba(255, 255, 255, 0.75) !important;

        border-radius: 15px !important;

        background:
            rgba(255, 255, 255, 0.90) !important;

        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        box-shadow:
            0 7px 18px rgba(35, 75, 110, 0.08) !important;

        color: #526f89 !important;

        font-size: 11px !important;
        font-weight: 600 !important;

        text-decoration: none !important;
    }


    .concept3-search > span:first-child {
        color: #355875 !important;
        font-size: 17px !important;
    }


    .concept3-search-text {
        flex: 1 !important;
    }


    .concept3-search-arrow {
        width: 31px !important;
        height: 31px !important;

        flex: 0 0 31px !important;

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

        border-radius: 50% !important;

        background: #e8f2fb !important;

        color: #143b5e !important;

        font-size: 16px !important;
        font-weight: 700 !important;
    }


    /* ================================
       CATEGORY BUTTONS
    ================================ */

    .concept3-categories {
        width: 100% !important;

        margin-top: 10px !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 6px !important;
    }


    .concept3-categories a {
        height: 36px !important;

        padding: 0 !important;

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

        border:
            1px solid rgba(255, 255, 255, 0.58) !important;

        border-radius: 10px !important;

        background:
            rgba(255, 255, 255, 0.16) !important;

        color: #ffffff !important;

        font-size: 11px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        text-decoration: none !important;

        text-shadow:
            0 1px 5px rgba(25, 55, 85, 0.12) !important;

        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }


    .concept3-categories a.active {
        background: #0d2b46 !important;

        border-color: #0d2b46 !important;

        color: #ffffff !important;

        box-shadow:
            0 6px 15px rgba(13, 43, 70, 0.20) !important;
    }


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

    .concept3-car-visual {
        position: absolute !important;

        left: 6px !important;
        right: 6px !important;

        bottom: 70px !important;

        height: 195px !important;

        z-index: 5 !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;

        padding: 0 !important;

        overflow: visible !important;

        pointer-events: none !important;
    }


    .concept3-hero-car {
        width: 100% !important;
        height: auto !important;

        max-width: 430px !important;
        max-height: 195px !important;

        display: block !important;

        object-fit: contain !important;
        object-position: center bottom !important;

        transform:
            translateY(8px)
            scale(1.05) !important;

        transform-origin:
            center bottom !important;

        filter:
            drop-shadow(
                0 18px 18px rgba(28, 52, 78, 0.20)
            ) !important;
    }


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

    .concept3-stats {
        position: absolute !important;

        left: 10px !important;
        right: 10px !important;

        bottom: 10px !important;

        height: 66px !important;

        padding: 7px 4px !important;

        display: grid !important;

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        border:
            1px solid rgba(255, 255, 255, 0.58) !important;

        border-radius: 14px !important;

        background:
            rgba(255, 255, 255, 0.66) !important;

        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        box-shadow:
            0 7px 20px rgba(35, 75, 110, 0.08) !important;

        z-index: 20 !important;
    }


    .concept3-stats > div {
        position: relative !important;

        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;

        text-align: center !important;
    }


    .concept3-stats > div:not(:last-child)::after {
        content: "";

        position: absolute;

        right: 0;
        top: 8px;
        bottom: 8px;

        width: 1px;

        background:
            rgba(60, 90, 120, 0.10);
    }


    .concept3-stats strong {
        color: #10253a !important;

        font-size: 14px !important;
        line-height: 1 !important;

        font-weight: 800 !important;
    }


    .concept3-stats span {
        max-width: 70px !important;

        color: #557087 !important;

        font-size: 7px !important;
        line-height: 1.15 !important;

        font-weight: 600 !important;
    }


    /* ================================
       NEXT SECTION
    ================================ */

    .cars-section {
        padding-top: 22px !important;

        background: #f6f9fc !important;
    }

}


@media (max-width: 720px) {

    .concept3-mobile-hero .concept3-car-visual {
        position: absolute !important;

        top: auto !important;
        left: 0 !important;
        right: 0 !important;

        bottom: 90px !important;

        width: 100% !important;
        height: 175px !important;

        padding: 0 10px !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;

        overflow: visible !important;

        z-index: 8 !important;
    }

    .concept3-mobile-hero .concept3-hero-car {
    width: 116% !important;
    height: 185px !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    transform: translateY(4px) !important;

    filter:
        drop-shadow(
            0 15px 16px rgba(25, 50, 75, 0.20)
        ) !important;
}

}


























@media (max-width: 720px) {

    .mobile-bottom-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 8px;

        height: 64px;
        z-index: 1500;

        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;

        padding: 5px;

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

        border: 1px solid rgba(30, 65, 100, 0.08);
        border-radius: 20px;

        box-shadow: 0 10px 30px rgba(25, 55, 85, 0.14);

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

}



@media (max-width: 720px) {

    .mobile-bottom-item {
        min-width: 0;

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

        gap: 4px;

        color: #718397;
        text-decoration: none;

        font-size: 8px !important;
        font-weight: 600;
        line-height: 1;

        white-space: nowrap;
    }

    .mobile-bottom-item svg {
        width: 20px;
        height: 20px;
        stroke-width: 1.8;
    }

    .mobile-bottom-item.active {
        color: #1769b0;
    }
}

@media (max-width: 720px) {
    .mobile-bottom-item {
        font-size: 10px !important;
    }
}



@media (max-width: 720px) {

    .mobile-bottom-item.active {
        color: #1769b0 !important;
        background: rgba(23, 105, 176, 0.08);
        border-radius: 12px;
    }

}



@media (max-width: 720px) {

    .mobile-bottom-item {
        height: 52px;
    }

    .mobile-bottom-item.active {
        color: #1769b0 !important;
        background: rgba(23, 105, 176, 0.10) !important;
        border-radius: 14px;

        width: 100%;
        height: 52px;
    }

}


@media (max-width: 720px) {

    .mobile-bottom-nav {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 68px !important;

        padding: 5px 10px 6px !important;

        border: none !important;
        border-top: 1px solid rgba(20, 45, 70, 0.08) !important;

        border-radius: 0 !important;

        background: rgba(255, 255, 255, 0.98) !important;

        box-shadow:
            0 -6px 18px rgba(20, 45, 70, 0.06) !important;

        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

}








@media (max-width: 720px) {

    .mobile-menu-overlay {
        position: fixed;
        inset: 0;

        z-index: 1800;

        background: rgba(10, 25, 40, 0.28);

        opacity: 0;
        visibility: hidden;

        transition: 0.25s ease;
    }

    .mobile-menu-drawer {
        position: fixed;

        top: 0;
        left: 0;
        bottom: 0;

        width: 84%;
        max-width: 330px;

        z-index: 1900;

        padding: 18px 16px 24px;

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

        box-shadow: 18px 0 40px rgba(25, 55, 85, 0.14);

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

        transform: translateX(-105%);

        transition: transform 0.28s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-panel.active {
        transform: translateX(0);
    }

}





@media (max-width: 720px) {

    .mobile-menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 4px 2px 18px;

        border-bottom: 1px solid rgba(20, 50, 80, 0.08);
    }

    .mobile-menu-title {
        font-size: 20px;
        font-weight: 800;
        color: #102438;
    }

    .mobile-menu-close {
        width: 38px;
        height: 38px;

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

        padding: 0;

        border: 1px solid rgba(20, 50, 80, 0.08);
        border-radius: 11px;

        background: #f5f9fc;
        color: #173a59;
    }

    .mobile-menu-close svg {
        width: 20px;
        height: 20px;
    }

    .mobile-menu-links {
        display: flex;
        flex-direction: column;

        gap: 5px;

        padding-top: 14px;
    }

    .mobile-menu-links a {
        width: 100%;
        min-height: 50px;

        display: flex;
        align-items: center;

        gap: 13px;

        padding: 0 13px;

        border-radius: 12px;

        color: #263d52;
        text-decoration: none;

        font-size: 14px;
        font-weight: 650;
    }

    .mobile-menu-links a svg {
        width: 20px;
        height: 20px;

        color: #52718d;
        stroke-width: 1.8;
    }

}


@media (max-width: 720px) {

    .mobile-menu-links a.active {
        background: #eef6ff;
        color: #1473e6;
    }

    .mobile-menu-links a.active svg {
        color: #1473e6;
    }

}



@media (max-width: 720px) {

    .mobile-menu-contact {
        position: absolute;

        left: 16px;
        right: 16px;
        bottom: 24px;

        padding-top: 16px;

        border-top: 1px solid rgba(20, 50, 80, 0.08);
    }

    .mobile-menu-contact > a {
        display: flex;
        align-items: center;
        gap: 10px;

        color: #173a59;
        text-decoration: none;

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

    .mobile-menu-contact > a svg {
        width: 18px;
        height: 18px;
    }

    .mobile-menu-socials {
        display: flex;
        gap: 8px;

        margin-top: 14px;
    }

    .mobile-menu-socials a {
        width: 38px;
        height: 38px;

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

        border-radius: 11px;

        background: #eef6ff;
        color: #1473e6;
    }

    .mobile-menu-socials svg {
        width: 18px;
        height: 18px;
    }

}


@media (max-width: 720px) {
    .mobile-menu-contact {
        bottom: 42px !important;
    }
}


















/* =========================================
   CONCEPT 3 — MOBILE CARS HEAD
========================================= */

.mobile-cars-head {
    display: none;
}

@media (max-width: 720px) {

    .mobile-cars-head {
        display: block;

        padding: 22px 16px 18px;

        background:
            linear-gradient(
                145deg,
                #eef7ff 0%,
                #f8fbfe 100%
            );
    }

    .mobile-cars-head-top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px;
    }

    .mobile-cars-kicker {
        margin: 0 0 4px;

        color: #6c8297;

        font-size: 9px;
        font-weight: 750;

        letter-spacing: 1.4px;
    }

    .mobile-cars-head h1 {
        margin: 0;

        color: #10263b;

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

        font-weight: 800;
        letter-spacing: -0.7px;
    }

    .mobile-filter-open {
        height: 40px;

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

        padding: 0 13px;

        border: 1px solid rgba(30, 70, 110, 0.09);
        border-radius: 12px;

        background: rgba(255,255,255,0.82);
        color: #173a59;

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

    .mobile-filter-open svg {
        width: 17px;
        height: 17px;
        stroke-width: 1.8;
    }

    .mobile-cars-search {
        height: 46px;

        margin-top: 17px;
        padding: 0 14px;

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

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

        border: 1px solid rgba(30,70,110,0.08);
        border-radius: 14px;

        box-shadow:
            0 7px 20px rgba(30,65,100,0.05);
    }

    .mobile-cars-search svg {
        width: 18px;
        height: 18px;

        color: #68839b;
    }

    .mobile-cars-search input {
        width: 100%;

        padding: 0;

        border: 0;
        outline: 0;

        background: transparent;

        color: #152d43;

        font-size: 13px;
    }

    .mobile-cars-search input::placeholder {
        color: #91a2b2;
    }
}



@media (max-width: 720px) {

    .cars-page .catalog-hero,
    .cars-page .catalog-filter-section {
        display: none !important;
    }

}











@media (max-width: 720px) {

    .mobile-cars-head {
        display: block !important;
        padding: 18px 14px 16px !important;
        background: #f7fbff !important;
    }

    .mobile-cars-title {
        margin-bottom: 14px;
    }

    .mobile-cars-title h1 {
        margin: 0;

        color: #10263b;

        font-size: 25px;
        line-height: 1.05;

        font-weight: 800;
        letter-spacing: -0.5px;
    }

    .mobile-cars-title p {
        margin: 5px 0 0;

        color: #7c91a4;

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

    .mobile-cars-search-row {
        display: grid;
        grid-template-columns: 1fr 46px;

        gap: 8px;
        align-items: center;
    }

    .mobile-cars-search {
        height: 44px;

        display: flex;
        align-items: center;

        gap: 9px;

        padding: 0 13px;

        border: 1px solid rgba(20, 55, 90, 0.08);
        border-radius: 12px;

        background: #ffffff;

        box-shadow:
            0 5px 16px rgba(30, 65, 100, 0.04);
    }

    .mobile-cars-search svg {
        width: 17px;
        height: 17px;

        color: #667f96;
    }

    .mobile-cars-search input {
        width: 100%;

        border: 0;
        outline: 0;

        background: transparent;

        color: #18334a;

        font-size: 11px;
    }

    .mobile-filter-open {
        width: 46px;
        height: 44px;

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

        padding: 0;

        border: 0;
        border-radius: 12px;

        background: #102f4d;
        color: #ffffff;

        box-shadow:
            0 6px 16px rgba(16, 47, 77, 0.15);
    }

    .mobile-filter-open svg {
        width: 18px;
        height: 18px;

        stroke-width: 1.8;
    }

    .mobile-car-categories {
        margin-top: 10px;

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

        gap: 7px;
    }

    .mobile-car-categories button {
        height: 34px;

        border: 0;
        border-radius: 10px;

        background: #edf3f8;
        color: #62798e;

        font-size: 9px;
        font-weight: 650;
    }

    .mobile-car-categories button.active {
        background: #102f4d;
        color: #ffffff;
    }

}





@media (max-width: 720px) {

    .mobile-car-categories button {
        font-size: 11px !important;
        font-weight: 700 !important;
    }

    .mobile-filter-open {
        width: 46px !important;
        height: 44px !important;

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

        background: #102f4d !important;
        color: #ffffff !important;

        border-radius: 12px !important;
    }

    .mobile-filter-open svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
    }

}







@media (max-width: 720px) {

    .mobile-cars-head {
        padding: 22px 16px 18px !important;
    }

    .mobile-cars-title h1 {
        font-size: 27px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
    }

    .mobile-cars-title p {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        font-weight: 500 !important;
        color: #71869a !important;
    }

    .mobile-cars-search-row {
        margin-top: 18px !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        gap: 9px !important;

        align-items: center !important;
    }

    .mobile-cars-search {
        width: 100% !important;
        height: 46px !important;

        margin: 0 !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 14px !important;
    }

    .mobile-cars-search input {
        font-size: 12px !important;
    }

    .mobile-filter-open {
        position: static !important;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-self: center !important;

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

    .mobile-car-categories {
        margin-top: 10px !important;
    }

    .mobile-car-categories button {
        height: 36px !important;
        font-size: 11px !important;
    }
}






@media (max-width: 720px) {

    .site-header {
        height: 64px !important;
        background: rgba(255,255,255,0.96) !important;
        border-bottom: 1px solid rgba(20,50,80,0.06) !important;
        box-shadow: 0 4px 18px rgba(20,50,80,0.04) !important;
    }

    .header-container {
        width: 100% !important;
        height: 64px !important;

        padding: 0 16px !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;
    }

    .desktop-nav,
    .header-actions {
        display: none !important;
    }

    .mobile-menu-btn {
        order: 1 !important;

        width: 34px !important;
        height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        border: none !important;
        background: transparent !important;

        color: #173a59 !important;
        font-size: 21px !important;
    }

    .site-logo {
        order: 2 !important;

        position: static !important;
        transform: none !important;

        margin: 0 !important;

        color: #10263b !important;

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

        text-decoration: none !important;
    }

    .mobile-header-actions {
        order: 3 !important;

        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 3px !important;
    }

    .mobile-header-search-btn,
    .mobile-favorite-btn,
    .mobile-header-phone-btn {
        width: 34px !important;
        height: 34px !important;

        margin: 0 !important;
        padding: 0 !important;

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

        border: none !important;
        outline: none !important;

        background: transparent !important;
        box-shadow: none !important;

        color: #173a59 !important;

        border-radius: 9px !important;
        text-decoration: none !important;
    }

    .mobile-header-search-btn svg,
    .mobile-favorite-btn svg,
    .mobile-header-phone-btn svg {
        width: 20px !important;
        height: 20px !important;

        stroke-width: 1.8 !important;
    }

}




@media (max-width: 720px) {

    .mobile-filter-overlay {
        position: fixed;
        inset: 0;

        background: rgba(10, 25, 40, 0.42);

        opacity: 0;
        visibility: hidden;

        transition: 0.3s ease;

        z-index: 9998;
    }

    .mobile-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .mobile-filter-sheet {
        position: fixed;

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

        background: rgba(247, 251, 255, 0.98);

        border-radius: 28px 28px 0 0;

        box-shadow: 0 -12px 40px rgba(20, 45, 70, 0.16);

        transform: translateY(105%);

        transition: 0.35s ease;

        z-index: 9999;

        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-filter-sheet.active {
        transform: translateY(0);
    }

    .mobile-filter-sheet::before {
        content: "";

        width: 42px;
        height: 4px;

        border-radius: 999px;

        background: #cfdbe5;

        display: block;

        margin: 10px auto 4px;
    }

    .mobile-filter-sheet-head {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 16px 18px 12px;
    }

    .mobile-filter-sheet-head p {
        margin: 0 0 3px;

        font-size: 11px;
        color: #7890a3;
    }

    .mobile-filter-sheet-head h2 {
        margin: 0;

        font-size: 24px;
        line-height: 1.1;

        color: #10263b;
    }

    .mobile-filter-close {
        width: 38px;
        height: 38px;

        border: none;
        border-radius: 12px;

        background: rgba(220, 232, 242, 0.7);

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

        color: #173a59;
    }

    .mobile-filter-close svg {
        width: 20px;
        height: 20px;
    }

    .mobile-filter-sheet-body {
        padding: 8px 18px 18px;

        display: grid;
        gap: 14px;
    }

    .mobile-filter-group {
        display: grid;
        gap: 7px;
    }

    .mobile-filter-group label {
        font-size: 12px;
        font-weight: 700;

        color: #294762;
    }

    .mobile-filter-group select {
        width: 100%;
        height: 48px;

        padding: 0 14px;

        border: 1px solid rgba(25, 60, 90, 0.1);
        border-radius: 14px;

        background: #ffffff;

        color: #15314a;

        font-size: 13px;

        outline: none;
    }

    .mobile-filter-sheet-actions {
        display: grid;
        grid-template-columns: 1fr 1.4fr;

        gap: 10px;

        padding: 14px 18px 18px;

        border-top: 1px solid rgba(25, 60, 90, 0.06);
    }

    .mobile-filter-reset,
    .mobile-filter-apply {
        height: 48px;

        border-radius: 14px;

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

    .mobile-filter-reset {
        border: 1px solid rgba(20, 50, 80, 0.1);

        background: #ffffff;

        color: #173a59;
    }

    .mobile-filter-apply {
        border: none;

        background: #173a59;

        color: #ffffff;
    }

}









@media (max-width: 720px) {

    .mobile-filter-apply.loading::before {
        content: "";

        width: 15px;
        height: 15px;

        border: 2px solid rgba(255,255,255,0.35);
        border-top-color: #ffffff;
        border-radius: 50%;

        display: inline-block;
        margin-right: 8px;

        vertical-align: -3px;

        animation: mobileFilterSpin 0.7s linear infinite;
    }

    @keyframes mobileFilterSpin {
        to {
            transform: rotate(360deg);
        }
    }

}



@media (max-width: 720px) {

    .mobile-custom-select {
        position: relative;
        width: 100%;
    }

    .mobile-custom-select-trigger {
        width: 100%;
        height: 48px;
        padding: 0 14px;

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

        border: 1px solid rgba(25, 60, 90, 0.10);
        border-radius: 14px;

        background: #ffffff;
        color: #15314a;

        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    .mobile-custom-select-trigger svg {
        width: 17px;
        height: 17px;
        transition: transform 0.25s ease;
    }

}







@media (max-width: 720px) {

    .mobile-custom-select-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 8px);

        max-height: 170px;
        overflow-y: auto;

        padding: 8px;

        background: #ffffff;
        border: 1px solid rgba(25, 60, 90, 0.08);
        border-radius: 16px;

        box-shadow: 0 14px 35px rgba(20, 45, 70, 0.14);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);

        transition: 0.22s ease;

        z-index: 30;
    }

    .mobile-custom-select-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-custom-select-option {
        width: 100%;
        min-height: 42px;

        padding: 0 12px;

        display: flex;
        align-items: center;

        border: none;
        border-radius: 10px;

        background: transparent;
        color: #15314a;

        font-size: 13px;
        text-align: left;

        cursor: pointer;
    }

    .mobile-custom-select-option:hover,
    .mobile-custom-select-option.active {
        background: #eef5fb;
    }

}






@media (max-width: 720px) {

    .mobile-filter-sheet-body {
        position: relative;
        z-index: 20;
    }

    .mobile-custom-select {
        z-index: 50;
    }

    .mobile-custom-select-menu {
        z-index: 100 !important;
    }

    .mobile-filter-sheet-actions {
        position: relative;
        z-index: 5;
    }

}




@media (max-width: 720px) {

    #mobileTypeMenu {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
        transform: translateY(6px);
    }

    #mobileTypeMenu.active {
        transform: translateY(0);
    }

}


@media (max-width: 720px) {

   

    #mobileBrandSelect,
    #mobileTypeSelect {
        z-index: 1;
    }

    #mobileBrandSelect:has(#mobileBrandMenu.active),
    #mobileTypeSelect:has(#mobileTypeMenu.active) {
        z-index: 200;
    }


}








@media (max-width: 720px) {

    #mobileBrandMenu {
        max-height: 220px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

}







@media (max-width: 720px) {

    #mobileBrandMenu {
        max-height: 240px !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

}





@media (max-width: 720px) {

    .mobile-filter-sheet-body {
        overflow: visible !important;
    }

    #mobileBrandMenu {
        height: 220px !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        pointer-events: auto !important;
    }

}

@media (max-width: 720px) {

    #mobileBrandMenu {
        max-height: min(240px, 40vh) !important;
        padding-bottom: px !important;
    }

}








@media (max-width: 720px) {

    .mobile-filter-sheet {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;

        width: auto !important;
        max-height: 72vh !important;

        border-radius: 24px !important;

        background:
            rgba(248, 252, 255, 0.96) !important;

        border:
            1px solid rgba(120, 165, 200, 0.16) !important;

        box-shadow:
            0 -12px 45px rgba(16, 42, 67, 0.18) !important;

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

        overflow: hidden;
    }

}







@media (max-width: 720px) {

    .mobile-filter-sheet-head {
        padding: 20px 20px 16px !important;
        border-bottom: 1px solid rgba(25, 60, 90, 0.07);
    }

    .mobile-filter-sheet-head p {
        margin: 0 0 3px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #7b91a5 !important;
        letter-spacing: 0.04em;
    }

    .mobile-filter-sheet-head h2 {
        margin: 0 !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        color: #102f49 !important;
    }

    .mobile-filter-close {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
        background: rgba(225, 238, 248, 0.75) !important;
        border: 1px solid rgba(25, 60, 90, 0.06) !important;

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

    .mobile-filter-close svg {
        width: 18px;
        height: 18px;
        color: #15314a;
    }

}





@media (max-width: 720px) {

    .mobile-filter-sheet-body {
        padding: 18px 20px 22px !important;
    }

    .mobile-filter-group {
        margin-bottom: 18px !important;
    }

    .mobile-filter-group:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-filter-group > label {
        display: block;
        margin: 0 0 8px !important;

        font-size: 12px !important;
        line-height: 1.2;
        font-weight: 600 !important;

        color: #607b91 !important;
    }

    .mobile-custom-select-trigger {
        height: 50px !important;
        padding: 0 15px !important;

        border-radius: 14px !important;
        border: 1px solid rgba(25, 60, 90, 0.09) !important;

        background: rgba(255, 255, 255, 0.88) !important;

        color: #15314a !important;
        font-size: 13px !important;
        font-weight: 500 !important;

        box-shadow: 0 5px 18px rgba(30, 70, 100, 0.04);
    }

}










@media (max-width: 720px) {

    .mobile-filter-sheet-actions {
        display: grid !important;
        grid-template-columns: 0.85fr 1.65fr !important;
        gap: 10px !important;

        padding: 14px 20px 18px !important;

        background: rgba(248, 252, 255, 0.94) !important;
        border-top: 1px solid rgba(25, 60, 90, 0.07) !important;
    }

    .mobile-filter-reset,
    .mobile-filter-apply {
        height: 50px !important;
        border-radius: 14px !important;

        font-size: 13px !important;
        font-weight: 600 !important;
        cursor: pointer;
    }

    .mobile-filter-reset {
        background: rgba(225, 238, 248, 0.8) !important;
        color: #15314a !important;
        border: 1px solid rgba(25, 60, 90, 0.08) !important;
    }

    .mobile-filter-apply {
        background: #102f49 !important;
        color: #ffffff !important;
        border: none !important;

        box-shadow:
            0 8px 20px rgba(16, 47, 73, 0.18) !important;
    }

}



























@media (max-width: 720px) {

    #mobileBrandMenu {
        max-height: 220px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

}



@media (max-width: 720px) {

    #mobileBrandMenu::-webkit-scrollbar {
        width: 4px;
    }

    #mobileBrandMenu::-webkit-scrollbar-track {
        background: transparent;
    }

    #mobileBrandMenu::-webkit-scrollbar-thumb {
        background: #b8c5d0;
        border-radius: 20px;
    }

}
























/* =====================================================
   BBA CARS — UNIVERSAL MOBILE BOTTOM NAV
===================================================== */

.mobile-bottom-nav {
    display: none;
}


@media (max-width: 720px) {

    body {
        padding-bottom: 72px !important;
    }


    .mobile-bottom-nav {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 64px !important;

        z-index: 9999 !important;

        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        align-items: center !important;

        margin: 0 !important;
        padding:
            4px 6px
            env(safe-area-inset-bottom) !important;

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

        border-top:
            1px solid
            rgba(20, 50, 80, 0.07) !important;

        box-shadow:
            0 -6px 24px
            rgba(25, 55, 85, 0.06) !important;

        backdrop-filter:
            blur(18px) saturate(150%) !important;

        -webkit-backdrop-filter:
            blur(18px) saturate(150%) !important;
    }


    .mobile-bottom-item {
        position: relative !important;

        min-width: 0 !important;
        height: 54px !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 3px !important;

        margin: 0 !important;
        padding: 4px 2px !important;

        border-radius: 12px !important;

        color: #83909b !important;

        text-decoration: none !important;

        transition:
            color 0.18s ease,
            background 0.18s ease !important;
    }


    .mobile-bottom-item svg {
        width: 21px !important;
        height: 21px !important;

        display: block !important;

        fill: none !important;

        stroke: currentColor !important;
        stroke-width: 1.7 !important;

        stroke-linecap: round !important;
        stroke-linejoin: round !important;

        flex-shrink: 0 !important;
    }


    .mobile-bottom-item span {
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 600 !important;

        white-space: nowrap !important;
    }


    .mobile-bottom-item.active {
        color: #1769b0 !important;

        background:
            rgba(23, 105, 176, 0.08) !important;
    }


    .mobile-bottom-item:active {
        transform: scale(0.97) !important;
    }

}










/* =========================================
   BBA CARS — MOBILE DRAWER FINAL FIX
========================================= */

@media (max-width: 720px) {

    .mobile-menu-overlay {
        position: fixed !important;
        inset: 0 !important;

        z-index: 1800 !important;

        background: rgba(10, 25, 40, 0.28) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transition: 0.25s ease !important;
    }

    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }


    .mobile-menu-drawer {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 78% !important;
        max-width: 310px !important;

        z-index: 1900 !important;

        padding: 18px 16px 24px !important;

        background: rgba(255, 255, 255, 0.98) !important;

        box-shadow:
            18px 0 40px rgba(25, 55, 85, 0.14) !important;

        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        transform: translateX(-105%) !important;

        transition:
            transform 0.28s ease !important;
    }


    .mobile-menu-drawer.active {
        transform: translateX(0) !important;
    }

}








@media (max-width: 720px) {

    .mobile-menu-drawer {
        width: 78% !important;
        max-width: 310px !important;

        padding: 18px 16px 24px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.98) 0%,
                rgba(246,250,254,0.98) 100%
            ) !important;

        border-right:
            1px solid rgba(30, 70, 110, 0.08) !important;

        box-shadow:
            18px 0 40px rgba(25, 55, 85, 0.14) !important;

        backdrop-filter: blur(22px) !important;
        -webkit-backdrop-filter: blur(22px) !important;
    }


    .mobile-menu-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 4px 2px 18px !important;

        border-bottom:
            1px solid rgba(20, 50, 80, 0.08) !important;
    }


    .mobile-menu-logo {
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;

        color: #102438 !important;
    }


    .mobile-menu-close {
        width: 38px !important;
        height: 38px !important;

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

        border:
            1px solid rgba(20, 50, 80, 0.08) !important;

        border-radius: 11px !important;

        background: #f5f9fc !important;
        color: #173a59 !important;

        font-size: 20px !important;
    }


    .mobile-menu-links {
        display: flex !important;
        flex-direction: column !important;

        gap: 6px !important;

        padding-top: 16px !important;
    }


    .mobile-menu-links a {
        width: 100% !important;
        min-height: 50px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 14px !important;

        border-radius: 13px !important;

        color: #263d52 !important;

        font-size: 14px !important;
        font-weight: 650 !important;

        transition:
            background 0.18s ease,
            color 0.18s ease,
            transform 0.18s ease !important;
    }


    .mobile-menu-links a:hover,
    .mobile-menu-links a:active {
        background: #eef6ff !important;
        color: #1473e6 !important;
    }


    .mobile-menu-links a.active {
        background: #eef6ff !important;
        color: #1473e6 !important;
    }


    .mobile-menu-contact {
        position: absolute !important;

        left: 16px !important;
        right: 16px !important;
        bottom: 34px !important;

        padding-top: 16px !important;

        border-top:
            1px solid rgba(20, 50, 80, 0.08) !important;
    }


    .mobile-menu-contact > a {
        display: flex !important;
        align-items: center !important;

        color: #173a59 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
    }


    .mobile-menu-socials {
        display: flex !important;
        gap: 8px !important;

        margin-top: 14px !important;
    }


    .mobile-menu-socials a {
        min-width: 86px !important;
        height: 36px !important;

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

        padding: 0 12px !important;

        border-radius: 11px !important;

        background: #eef6ff !important;
        color: #1473e6 !important;

        font-size: 11px !important;
        font-weight: 700 !important;
    }

}






@media (max-width: 720px) {

    .mobile-menu-links a {
        min-height: 48px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 14px !important;

        border-radius: 14px !important;

        background: transparent !important;

        color: #263d52 !important;

        font-size: 14px !important;
        font-weight: 650 !important;
    }

    .mobile-menu-links a.active {
        background: #eef6ff !important;
        color: #1473e6 !important;

        box-shadow:
            inset 0 0 0 1px rgba(20, 115, 230, 0.06) !important;
    }

}










/* =====================================================
   BBA CARS — FINAL PREMIUM MOBILE MENU
===================================================== */

@media (max-width: 720px) {

    /* OVERLAY */
    .mobile-menu-overlay {
        position: fixed !important;
        inset: 0 !important;

        z-index: 11990 !important;

        background:
            rgba(10, 25, 40, 0.34) !important;

        backdrop-filter:
            blur(3px) !important;

        -webkit-backdrop-filter:
            blur(3px) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }


    .mobile-menu-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
    }


    /* DRAWER */
    .mobile-menu-drawer {
        position: fixed !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 82% !important;
        max-width: 330px !important;

        z-index: 12000 !important;

        padding:
            18px 16px
            calc(92px + env(safe-area-inset-bottom))
            !important;

        overflow: hidden !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.99) 0%,
                rgba(247,251,255,0.98) 100%
            ) !important;

        border-right:
            1px solid
            rgba(28, 70, 105, 0.08) !important;

        box-shadow:
            20px 0 55px
            rgba(28, 58, 88, 0.16) !important;

        backdrop-filter:
            blur(24px)
            saturate(150%) !important;

        -webkit-backdrop-filter:
            blur(24px)
            saturate(150%) !important;

        transform:
            translateX(-105%) !important;

        transition:
            transform 0.3s
            cubic-bezier(.22,.61,.36,1) !important;
    }


    .mobile-menu-drawer.active {
        transform:
            translateX(0) !important;
    }


    /* TOP */
    .mobile-menu-top {
        height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 0 2px 14px !important;

        border-bottom:
            1px solid
            rgba(25, 65, 100, 0.07) !important;
    }


    .mobile-menu-logo {
        color: #10263b !important;

        font-size: 18px !important;
        line-height: 1 !important;

        font-weight: 800 !important;

        letter-spacing:
            0.5px !important;
    }


    /* CLOSE */
    .mobile-menu-close {
        width: 38px !important;
        height: 38px !important;

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

        padding: 0 !important;

        border:
            1px solid
            rgba(23, 70, 108, 0.08) !important;

        border-radius: 12px !important;

        background:
            rgba(239,247,253,0.90) !important;

        color: #264d6c !important;

        cursor: pointer !important;
    }


    .mobile-menu-close svg {
        width: 18px !important;
        height: 18px !important;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width: 1.8 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;
    }




/* MOBILE LANGUAGE SWITCHER */
.mobile-language-switcher {
    height: 42px !important;
    margin: 10px 2px 2px !important;

    display: flex !important;
    align-items: center !important;

    gap: 4px !important;

    padding: 4px !important;

    background: rgba(239, 247, 253, 0.75) !important;
    border: 1px solid rgba(23, 70, 108, 0.07) !important;
    border-radius: 12px !important;
}

.mobile-lang-btn {
    flex: 1 !important;
    height: 32px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: transparent !important;
    color: #6b7d8d !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    cursor: pointer !important;
}

.mobile-lang-btn.active {
    background: #10263b !important;
    color: #ffffff !important;

    box-shadow:
        0 3px 10px rgba(16, 38, 59, 0.18) !important;
}




    /* LINKS */
    .mobile-menu-links {
        display: flex !important;
        flex-direction: column !important;

        gap: 6px !important;

        padding-top: 18px !important;
    }


    .mobile-menu-links > a {
        width: 100% !important;
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;

        gap: 13px !important;

        padding:
            0 13px !important;

        border-radius:
            14px !important;

        color: #263f55 !important;

        font-size: 14px !important;
        line-height: 1 !important;

        font-weight: 650 !important;

        background:
            transparent !important;

        text-decoration:
            none !important;

        transition:
            background 0.18s ease,
            color 0.18s ease,
            transform 0.18s ease !important;
    }


    .mobile-menu-links > a:active {
        transform:
            scale(0.985) !important;

        background:
            #edf6ff !important;

        color:
            #176eb8 !important;
    }


    /* MENU ICON BOX */
    .mobile-menu-icon {
        width: 34px !important;
        height: 34px !important;

        flex:
            0 0 34px !important;

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

        border-radius:
            11px !important;

        background:
            rgba(237,246,253,0.92) !important;

        border:
            1px solid
            rgba(24,77,120,0.06) !important;

        color:
            #52748f !important;
    }


    .mobile-menu-icon svg {
        width: 18px !important;
        height: 18px !important;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width:
            1.7 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;
    }


    /* ACTIVE PAGE */
    .mobile-menu-links > a.active {
        color:
            #126dc0 !important;

        background:
            linear-gradient(
                135deg,
                #edf6ff 0%,
                #f5faff 100%
            ) !important;

        box-shadow:
            inset 0 0 0 1px
            rgba(18,109,192,0.06) !important;
    }


    .mobile-menu-links > a.active
    .mobile-menu-icon {
        color:
            #126dc0 !important;

        background:
            #dfefff !important;
    }


    /* BOTTOM CONTACT */
    .mobile-menu-contact {
        position:
            absolute !important;

        left: 16px !important;
        right: 16px !important;

        bottom:
            calc(
                82px +
                env(safe-area-inset-bottom)
            ) !important;

        padding-top:
            16px !important;

        border-top:
            1px solid
            rgba(25,65,100,0.08) !important;
    }


    .mobile-menu-phone {
        min-height:
            42px !important;

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            10px !important;

        color:
            #173a59 !important;

        font-size:
            13px !important;

        font-weight:
            700 !important;
    }


    .mobile-menu-phone-icon {
        width: 34px !important;
        height: 34px !important;

        flex:
            0 0 34px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border-radius:
            11px !important;

        background:
            #edf6fd !important;

        color:
            #34698f !important;
    }


    .mobile-menu-phone-icon svg {
        width: 17px !important;
        height: 17px !important;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width:
            1.7 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;
    }


    /* SOCIAL */
    .mobile-menu-socials {
        display:
            flex !important;

        align-items:
            center !important;

        gap:
            9px !important;

        margin-top:
            12px !important;
    }


    .mobile-social-btn {
        width: 40px !important;
        height: 40px !important;

        min-width:
            40px !important;

        padding:
            0 !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border:
            1px solid
            rgba(22,92,150,0.07) !important;

        border-radius:
            12px !important;

        background:
            linear-gradient(
                145deg,
                #edf7ff 0%,
                #f7fbff 100%
            ) !important;

        color:
            #1473e6 !important;

        box-shadow:
            0 5px 14px
            rgba(35,85,125,0.05) !important;
    }


    .mobile-social-btn svg {
        width: 18px !important;
        height: 18px !important;

        fill: none !important;

        stroke:
            currentColor !important;

        stroke-width:
            1.7 !important;

        stroke-linecap:
            round !important;

        stroke-linejoin:
            round !important;
    }

}










/* =====================================================
   BBA CARS — UNIVERSAL HEADER FINAL
===================================================== */

.site-header {
    width: 100%;
    height: 76px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

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

    border-bottom:
        1px solid rgba(20,40,60,0.07);

    backdrop-filter:
        blur(18px);

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


.header-container {
    width: calc(100% - 140px);
    max-width: 1500px;
    height: 100%;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        180px 1fr auto;

    align-items: center;

    gap: 28px;
}


.site-logo {
    color: #102438;

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

    letter-spacing: 0.6px;

    white-space: nowrap;
}


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

    gap: 28px;
}


.desktop-nav a {
    position: relative;

    color: #263845;

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

    white-space: nowrap;
}


.desktop-nav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 0;
    height: 2px;

    background: #1473e6;

    transform: translateX(-50%);

    transition: width 0.2s ease;
}


.desktop-nav a:hover::after,
.desktop-nav a.active::after {
    width: 100%;
}


.header-actions {
    display: flex;
    align-items: center;

    gap: 18px;
}


.header-phone,
.header-favorites {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #263845;

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

    white-space: nowrap;
}


.header-phone svg,
.header-favorites svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.header-order-btn {
    height: 42px;

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

    padding: 0 20px;

    border-radius: 10px;

    background: #102438;
    color: #fff;

    font-size: 12px;
    font-weight: 700;
}


/* DESKTOPDA MOBILE ELEMENTLAR YASHIRILADI */

.mobile-menu-btn,
.mobile-header-actions {
    display: none;
}


/* IPAD */

@media (max-width: 1180px) {

    .header-container {
        width: calc(100% - 60px);

        grid-template-columns:
            150px 1fr auto;

        gap: 18px;
    }

    .desktop-nav {
        gap: 18px;
    }

    .desktop-nav a {
        font-size: 11px;
    }

    .header-favorites {
        display: none;
    }

}


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

@media (max-width: 720px) {

    body {
        padding-top: 62px !important;
    }


    .site-header {
        height: 62px !important;
    }


    .header-container {
        width: 100% !important;
        height: 100% !important;

        padding: 0 16px !important;

        display: flex !important;

        align-items: center !important;

        gap: 10px !important;
    }


    .desktop-nav,
    .header-actions {
        display: none !important;
    }


    .mobile-menu-btn {
        width: 38px !important;
        height: 38px !important;

        flex: 0 0 38px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        border: none !important;

        background: transparent !important;

        color: #17364f !important;
    }


    .mobile-menu-btn svg {
        width: 22px !important;
        height: 22px !important;

        fill: none !important;
        stroke: currentColor !important;

        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
    }


    .site-logo {
        position: static !important;

        transform: none !important;

        margin-right: auto !important;

        color: #102438 !important;

        font-size: 16px !important;
        font-weight: 800 !important;

        letter-spacing: 0.4px !important;
    }


    .mobile-header-actions {
        display: flex !important;

        align-items: center !important;

        gap: 4px !important;
    }


    .mobile-header-search-btn,
    .mobile-favorite-btn,
    .mobile-header-phone-btn {
        width: 36px !important;
        height: 36px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;

        border-radius: 10px !important;

        color: #29465d !important;

        background: transparent !important;
    }


    .mobile-header-search-btn svg,
    .mobile-favorite-btn svg,
    .mobile-header-phone-btn svg {
        width: 20px !important;
        height: 20px !important;

        fill: none !important;
        stroke: currentColor !important;

        stroke-width: 1.7 !important;

        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

}








/* =====================================================
   BBA CARS — MOBILE FLOATING GLASS HEADER
===================================================== */

@media (max-width: 720px) {

    body {
        padding-top: 78px !important;
    }

    .site-header {
        top: 10px !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        height: 58px !important;

        border-radius: 17px !important;

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

border:
    1px solid rgba(25, 60, 90, 0.09) !important;

box-shadow:
    0 7px 22px rgba(20, 50, 80, 0.07) !important;
        backdrop-filter:
            blur(20px) saturate(150%) !important;

        -webkit-backdrop-filter:
            blur(20px) saturate(150%) !important;

        overflow: hidden !important;
    }

    .header-container {
        height: 58px !important;

        padding:
            0 12px !important;
    }

    .mobile-menu-btn {
        width: 34px !important;
        height: 34px !important;

        border-radius:
            10px !important;
    }

    .site-logo {
        font-size:
            15px !important;

        font-weight:
            800 !important;

        letter-spacing:
            0.3px !important;
    }

    .mobile-header-actions {
        gap: 2px !important;
    }

    .mobile-header-search-btn,
    .mobile-favorite-btn,
    .mobile-header-phone-btn {
        width: 34px !important;
        height: 34px !important;

        border-radius:
            10px !important;
    }

    .mobile-menu-btn:active,
    .mobile-header-search-btn:active,
    .mobile-favorite-btn:active,
    .mobile-header-phone-btn:active {
        background:
            rgba(224, 239, 251, 0.8) !important;
    }

}























/* =====================================================
   BBA CARS — NASIYA MOBILE FINAL / CONCEPT 3
===================================================== */

@media (max-width: 720px) {

    .nasiya-page {
        background:
            linear-gradient(
                180deg,
                #f7fbfe 0%,
                #ffffff 18%,
                #f8fbfd 100%
            ) !important;
    }


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

    .nasiya-hero {
        padding:
            18px 12px 20px !important;

        background:
            transparent !important;
    }


    .nasiya-hero-inner {
        min-height:
            auto !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        overflow:
            hidden !important;

        border:
            1px solid
            rgba(25,70,110,0.08) !important;

        border-radius:
            24px !important;

        background:
            linear-gradient(
                145deg,
                #eef7ff 0%,
                #f8fbfe 55%,
                #edf5fa 100%
            ) !important;

        box-shadow:
            0 12px 34px
            rgba(25,60,90,0.07) !important;
    }


    .nasiya-hero-copy {
        padding:
            28px 22px 8px !important;
    }


    .nasiya-kicker,
    .nasiya-section-label {
        display:
            block !important;

        margin-bottom:
            10px !important;

        color:
            #6f879a !important;

        font-size:
            9px !important;

        font-weight:
            800 !important;

        letter-spacing:
            1.7px !important;
    }


    .nasiya-hero h1 {
        max-width:
            330px !important;

        margin:
            0 !important;

        color:
            #102438 !important;

        font-size:
            35px !important;

        line-height:
            1.03 !important;

        letter-spacing:
            -1.2px !important;

        font-weight:
            800 !important;
    }


    .nasiya-hero-copy > p {
        max-width:
            330px !important;

        margin:
            15px 0 0 !important;

        color:
            #71818d !important;

        font-size:
            12px !important;

        line-height:
            1.65 !important;
    }


    .nasiya-hero-actions {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            8px !important;

        margin-top:
            20px !important;
    }


    .nasiya-btn {
        width:
            100% !important;

        min-height:
            46px !important;

        padding:
            0 16px !important;

        border-radius:
            13px !important;

        font-size:
            12px !important;

        font-weight:
            700 !important;
    }


    .nasiya-btn-dark {
        background:
            #102438 !important;

        color:
            #ffffff !important;

        border:
            1px solid #102438 !important;
    }


    .nasiya-btn-light {
        background:
            rgba(255,255,255,0.72) !important;

        color:
            #27445b !important;

        border:
            1px solid
            rgba(30,70,105,0.08) !important;
    }


    .nasiya-hero-visual {
        min-height:
            235px !important;

        height:
            235px !important;

        margin-top:
            4px !important;
    }


    .nasiya-car-slider,
    .nasiya-slide {
        width:
            100% !important;

        height:
            100% !important;
    }


    .nasiya-slide {
        object-fit:
            contain !important;

        object-position:
            center !important;
    }



    /* =================================================
       BENEFITS
    ================================================= */

    .nasiya-benefits {
        padding:
            10px 12px 26px !important;

        background:
            transparent !important;
    }


    .nasiya-benefits-inner {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            8px !important;
    }


    .nasiya-benefit-item {
        min-height:
            76px !important;

        display:
            flex !important;

        align-items:
            center !important;

        gap:
            13px !important;

        padding:
            14px !important;

        border:
            1px solid
            rgba(25,70,110,0.07) !important;

        border-radius:
            16px !important;

        background:
            rgba(255,255,255,0.82) !important;

        box-shadow:
            0 6px 18px
            rgba(25,60,90,0.04) !important;
    }


    .nasiya-benefit-icon {
        width:
            36px !important;

        height:
            36px !important;

        flex:
            0 0 36px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border-radius:
            11px !important;

        background:
            #edf6fd !important;

        color:
            #2c6d9c !important;

        font-size:
            15px !important;
    }


    .nasiya-benefit-item h3 {
        margin:
            0 0 3px !important;

        color:
            #183247 !important;

        font-size:
            13px !important;

        line-height:
            1.2 !important;

        font-weight:
            750 !important;
    }


    .nasiya-benefit-item p {
        margin:
            0 !important;

        color:
            #84929c !important;

        font-size:
            10.5px !important;

        line-height:
            1.45 !important;
    }



    /* =================================================
       4 QADAM
    ================================================= */

    .nasiya-process {
        padding:
            34px 12px !important;

        background:
            #f6f9fb !important;
    }


    .nasiya-process-inner {
        width:
            100% !important;

        margin:
            0 !important;

        padding:
            22px 18px !important;

        border:
            1px solid
            rgba(25,70,110,0.07) !important;

        border-radius:
            22px !important;

        background:
            rgba(255,255,255,0.88) !important;

        box-shadow:
            0 10px 28px
            rgba(25,60,90,0.05) !important;
    }


    .nasiya-process-head {
        margin-bottom:
            20px !important;
    }


    .nasiya-process-head h2 {
        margin:
            5px 0 8px !important;

        color:
            #102438 !important;

        font-size:
            27px !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.7px !important;

        font-weight:
            800 !important;
    }


    .nasiya-process-head p {
        margin:
            0 !important;

        max-width:
            320px !important;

        color:
            #7a8995 !important;

        font-size:
            11px !important;

        line-height:
            1.55 !important;
    }


    .nasiya-process-steps {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            10px !important;
    }


    .nasiya-process-step {
        position:
            relative !important;

        min-height:
            84px !important;

        padding:
            14px 14px 14px 62px !important;

        border:
            1px solid
            rgba(25,70,110,0.07) !important;

        border-radius:
            15px !important;

        background:
            #f8fbfd !important;
    }


    .nasiya-step-number {
        position:
            absolute !important;

        left:
            14px !important;

        top:
            14px !important;

        width:
            34px !important;

        height:
            34px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border-radius:
            50% !important;

        background:
            #e7f2fb !important;

        color:
            #24699d !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;
    }


    .nasiya-process-step h3 {
        margin:
            1px 0 5px !important;

        color:
            #183247 !important;

        font-size:
            13px !important;

        font-weight:
            750 !important;
    }


    .nasiya-process-step p {
        margin:
            0 !important;

        color:
            #84919b !important;

        font-size:
            10.5px !important;

        line-height:
            1.45 !important;
    }



    /* =================================================
       NASIYA CARS
    ================================================= */

    .nasiya-cars {
        padding:
            36px 12px !important;

        background:
            #ffffff !important;
    }


    .nasiya-cars-inner {
        width:
            100% !important;

        margin:
            0 !important;
    }


    .nasiya-cars-head {
        display:
            block !important;

        margin-bottom:
            18px !important;
    }


    .nasiya-cars-head h2 {
        margin:
            5px 0 7px !important;

        color:
            #102438 !important;

        font-size:
            27px !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.7px !important;

        font-weight:
            800 !important;
    }


    .nasiya-cars-head p {
        margin:
            0 !important;

        color:
            #7e8c97 !important;

        font-size:
            11px !important;

        line-height:
            1.5 !important;
    }


    .nasiya-cars-all {
        display:
            inline-flex !important;

        margin-top:
            12px !important;

        color:
            #225a83 !important;

        font-size:
            11px !important;

        font-weight:
            700 !important;
    }


    .nasiya-cars-grid {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            14px !important;
    }


    .nasiya-cars-grid .car-card {
        margin:
            0 !important;

        border-radius:
            18px !important;

        overflow:
            hidden !important;

        border:
            1px solid
            rgba(25,70,110,0.07) !important;

        background:
            #ffffff !important;

        box-shadow:
            0 8px 24px
            rgba(25,60,90,0.05) !important;
    }



    /* =================================================
       APPLICATION
    ================================================= */

    .nasiya-apply {
        padding:
            38px 12px !important;

        background:
            transparent !important;
    }


    .nasiya-apply-inner {
        width:
            100% !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        gap:
            22px !important;

        padding:
            26px 18px 18px !important;

        border-radius:
            24px !important;

        background:
            linear-gradient(
                155deg,
                #152b3c 0%,
                #102438 100%
            ) !important;

        box-shadow:
            0 16px 36px
            rgba(16,36,56,0.16) !important;
    }


    .nasiya-apply-copy h2 {
        max-width:
            330px !important;

        margin:
            8px 0 10px !important;

        color:
            #ffffff !important;

        font-size:
            29px !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.8px !important;

        font-weight:
            800 !important;
    }


    .nasiya-apply-copy > p {
        max-width:
            330px !important;

        margin:
            0 !important;

        color:
            #aebbc5 !important;

        font-size:
            11px !important;

        line-height:
            1.6 !important;
    }


    .nasiya-apply-points {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            0 !important;

        margin-top:
            20px !important;
    }


    .nasiya-apply-points > div {
        padding:
            11px 0 !important;

        border-top:
            1px solid
            rgba(255,255,255,0.10) !important;
    }


    .nasiya-apply-points span {
        margin-bottom:
            4px !important;

        color:
            #6f8799 !important;

        font-size:
            8px !important;
    }


    .nasiya-apply-points p {
        color:
            #e6edf2 !important;

        font-size:
            11px !important;
    }


    .nasiya-apply-card {
        padding:
            17px !important;

        border-radius:
            18px !important;

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

        box-shadow:
            0 8px 24px
            rgba(0,0,0,0.10) !important;
    }


    .nasiya-apply-card label {
        margin-bottom:
            6px !important;

        color:
            #31485a !important;

        font-size:
            10px !important;

        font-weight:
            700 !important;
    }


    .nasiya-apply-card input {
        width:
            100% !important;

        height:
            46px !important;

        margin-bottom:
            14px !important;

        padding:
            0 12px !important;

        border:
            1px solid
            rgba(25,70,110,0.08) !important;

        border-radius:
            11px !important;

        background:
            #f7fafc !important;

        color:
            #183247 !important;

        font-size:
            12px !important;

        outline:
            none !important;
    }


    .nasiya-apply-card input:focus {
        border-color:
            rgba(20,115,230,0.32) !important;

        box-shadow:
            0 0 0 3px
            rgba(20,115,230,0.07) !important;
    }


    .nasiya-apply-submit {
        width:
            100% !important;

        height:
            46px !important;

        margin-top:
            2px !important;

        padding:
            0 14px !important;

        border:
            none !important;

        border-radius:
            12px !important;

        background:
            #102438 !important;

        color:
            #ffffff !important;

        font-size:
            11px !important;

        font-weight:
            750 !important;
    }



    /* =================================================
       FAQ
    ================================================= */

    .nasiya-faq {
        padding:
            38px 12px 42px !important;

        background:
            #ffffff !important;
    }


    .nasiya-faq-inner {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;
    }


    .nasiya-faq-head {
        max-width:
            none !important;

        margin-bottom:
            20px !important;
    }


    .nasiya-faq-head h2 {
        margin:
            6px 0 8px !important;

        color:
            #102438 !important;

        font-size:
            29px !important;

        line-height:
            1.08 !important;

        letter-spacing:
            -0.8px !important;

        font-weight:
            800 !important;
    }


    .nasiya-faq-head p {
        max-width:
            330px !important;

        margin:
            0 !important;

        color:
            #82909a !important;

        font-size:
            11px !important;

        line-height:
            1.55 !important;
    }


    .nasiya-faq-list {
        border-top:
            none !important;
    }


    .nasiya-faq-item {
        margin-bottom:
            8px !important;

        overflow:
            hidden !important;

        border:
            1px solid
            rgba(25,70,110,0.07) !important;

        border-radius:
            14px !important;

        background:
            #f8fbfd !important;
    }


    .nasiya-faq-question {
        min-height:
            58px !important;

        padding:
            0 12px 0 14px !important;

        gap:
            12px !important;

        color:
            #20394d !important;

        font-size:
            12px !important;

        line-height:
            1.35 !important;

        font-weight:
            700 !important;
    }


    .nasiya-faq-icon {
        width:
            30px !important;

        height:
            30px !important;

        flex:
            0 0 30px !important;

        border:
            none !important;

        background:
            #e9f3fb !important;

        color:
            #2b6894 !important;

        font-size:
            18px !important;
    }


    .nasiya-faq-answer p {
        padding:
            0 14px 14px !important;

        color:
            #7e8d98 !important;

        font-size:
            10.5px !important;

        line-height:
            1.55 !important;
    }

}




/* =====================================================
   NASIYA MOBILE — FINAL POLISH
===================================================== */

@media (max-width: 720px) {

    


    /* ===============================================
       APPLICATION — PREMIUM COMPACT
    =============================================== */

    .nasiya-apply-inner {
        padding:
            24px 16px 16px !important;

        gap:
            18px !important;

        border-radius:
            22px !important;
    }


    .nasiya-apply-copy h2 {
        font-size:
            27px !important;

        line-height:
            1.06 !important;

        margin:
            7px 0 9px !important;
    }


    .nasiya-apply-copy > p {
        font-size:
            10.5px !important;

        line-height:
            1.55 !important;
    }


    .nasiya-apply-points {
        margin-top:
            16px !important;
    }


    .nasiya-apply-points > div {
        padding:
            9px 0 !important;
    }


    .nasiya-apply-card {
        width:
            100% !important;

        max-width:
            none !important;

        margin:
            0 !important;

        padding:
            16px !important;

        border-radius:
            17px !important;
    }


    .nasiya-apply-card input {
        height:
            44px !important;

        margin-bottom:
            11px !important;
    }


    .nasiya-apply-submit {
        height:
            44px !important;

        margin-top:
            0 !important;
    }


    /* ===============================================
       FAQ — BIR OZ IXCHAM
    =============================================== */

    .nasiya-faq {
        padding-bottom:
            30px !important;
    }


    .nasiya-faq-item {
        margin-bottom:
            7px !important;
    }


    .nasiya-faq-question {
        min-height:
            54px !important;
    }

}
















/* ===================================================== BBA CARS — XIZMATLAR MOBILE FINAL / CONCEPT 3 ===================================================== */
@media (max-width: 720px) {
.services-page {
    background:
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 22%,
            #f7fafc 100%
        ) !important;
}


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

.services-hero {
    padding:
        26px 12px 28px !important;

    background:
        transparent !important;
}


.services-hero-inner {
    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        22px !important;

    width:
        100% !important;

    margin:
        0 !important;

    padding:
        26px 18px 18px !important;

    border-radius:
        24px !important;

    background:
        linear-gradient(
            145deg,
            #eef7ff 0%,
            #f8fbfe 58%,
            #edf5fa 100%
        ) !important;

    border:
        1px solid
        rgba(25,70,110,0.08) !important;

    box-shadow:
        0 12px 34px
        rgba(25,60,90,0.07) !important;
}


.services-kicker,
.services-section-label {
    display:
        block !important;

    margin-bottom:
        10px !important;

    color:
        #6f879a !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.7px !important;
}


.services-hero-copy h1 {
    max-width:
        350px !important;

    margin:
        0 !important;

    color:
        #102438 !important;

    font-size:
        34px !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -1.1px !important;

    font-weight:
        800 !important;
}


.services-hero-copy > p {
    max-width:
        330px !important;

    margin:
        15px 0 0 !important;

    color:
        #73828e !important;

    font-size:
        12px !important;

    line-height:
        1.65 !important;
}


.services-hero-actions {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        8px !important;

    margin-top:
        20px !important;
}


.services-btn {
    width:
        100% !important;

    min-height:
        46px !important;

    border-radius:
        13px !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


.services-btn-dark {
    background:
        #102438 !important;

    color:
        #ffffff !important;
}


.services-btn-light {
    background:
        rgba(255,255,255,0.78) !important;

    color:
        #29485f !important;

    border:
        1px solid
        rgba(25,70,110,0.08) !important;
}


/* HERO INFO */

.services-hero-info {
    width:
        100% !important;

    max-width:
        none !important;

    padding:
        0 !important;
}


.services-hero-info-item {
    display:
        grid !important;

    grid-template-columns:
        38px 1fr !important;

    gap:
        12px !important;

    align-items:
        center !important;

    padding:
        13px 0 !important;

    border-bottom:
        1px solid
        rgba(25,70,110,0.07) !important;
}


.services-hero-info-item:first-child {
    border-top:
        1px solid
        rgba(25,70,110,0.07) !important;
}


.services-hero-info-item > span {
    width:
        34px !important;

    height:
        34px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        50% !important;

    background:
        #e8f3fb !important;

    color:
        #2e6d99 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;
}


.services-hero-info-item strong {
    margin:
        0 0 3px !important;

    color:
        #183247 !important;

    font-size:
        13px !important;

    font-weight:
        750 !important;
}


.services-hero-info-item p {
    margin:
        0 !important;

    color:
        #87949e !important;

    font-size:
        10.5px !important;

    line-height:
        1.45 !important;
}



/* =================================================
   SERVICES LIST
================================================= */

.services-list {
    padding:
        34px 12px 38px !important;

    background:
        #f6f9fb !important;
}


.services-list-inner {
    width:
        100% !important;

    margin:
        0 !important;
}


.services-list-head {
    max-width:
        none !important;

    margin-bottom:
        20px !important;
}


.services-list-head h2 {
    max-width:
        340px !important;

    margin:
        5px 0 8px !important;

    color:
        #102438 !important;

    font-size:
        29px !important;

    line-height:
        1.07 !important;

    letter-spacing:
        -0.8px !important;

    font-weight:
        800 !important;
}


.services-list-head p {
    max-width:
        330px !important;

    margin:
        0 !important;

    color:
        #7d8b96 !important;

    font-size:
        11px !important;

    line-height:
        1.55 !important;
}


.services-grid {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        10px !important;

    border:
        none !important;
}


.service-card {
    min-height:
        0 !important;

    padding:
        16px !important;

    display:
        block !important;

    border:
        1px solid
        rgba(25,70,110,0.07) !important;

    border-radius:
        17px !important;

    background:
        rgba(255,255,255,0.90) !important;

    box-shadow:
        0 7px 20px
        rgba(25,60,90,0.045) !important;
}


.service-number {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        32px !important;

    height:
        32px !important;

    margin-bottom:
        11px !important;

    border-radius:
        10px !important;

    background:
        #eaf4fb !important;

    color:
        #2e6b96 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;
}


.service-card h3 {
    margin:
        0 0 6px !important;

    color:
        #183247 !important;

    font-size:
        18px !important;

    line-height:
        1.2 !important;

    letter-spacing:
        -0.3px !important;

    font-weight:
        750 !important;
}


.service-card p {
    margin:
        0 0 11px !important;

    color:
        #7f8d98 !important;

    font-size:
        11px !important;

    line-height:
        1.55 !important;
}


.service-card-link {
    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        7px !important;

    color:
        #23618d !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;
}



/* =================================================
   DARK SERVICE / AFTER SALES CARD
================================================= */

.services-dark,
.services-support,
.services-after-sale {
    padding:
        30px 12px !important;

    background:
        transparent !important;
}


.services-dark-inner,
.services-support-inner,
.services-after-sale-inner {
    padding:
        24px 18px !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            150deg,
            #172d3f 0%,
            #102438 100%
        ) !important;

    box-shadow:
        0 14px 34px
        rgba(16,36,56,0.14) !important;
}


.services-dark h2,
.services-support h2,
.services-after-sale h2 {
    margin:
        6px 0 10px !important;

    color:
        #ffffff !important;

    font-size:
        27px !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -0.7px !important;

    font-weight:
        800 !important;
}


.services-dark p,
.services-support p,
.services-after-sale p {
    color:
        #adbac4 !important;

    font-size:
11px !important;

    line-height:
        1.6 !important;
}



/* =================================================
   FINAL CONTACT CTA
================================================= */

.services-contact,
.services-cta {
    padding:
        30px 12px 38px !important;

    background:
        transparent !important;
}


.services-contact-inner,
.services-cta-inner {
    padding:
        25px 18px !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            150deg,
            #152b3c 0%,
            #102438 100%
        ) !important;

    box-shadow:
        0 14px 34px
        rgba(16,36,56,0.14) !important;
}


.services-contact h2,
.services-cta h2 {
    margin:
        7px 0 10px !important;

    color:
        #ffffff !important;

    font-size:
        29px !important;

    line-height:
        1.06 !important;

    letter-spacing:
        -0.8px !important;

    font-weight:
        800 !important;
}


.services-contact p,
.services-cta p {
    margin:
        0 !important;

    color:
        #aebbc5 !important;

    font-size:
        11px !important;

    line-height:
        1.6 !important;
}


.services-contact a,
.services-cta a {
    width:
        100% !important;

    min-height:
        46px !important;

    margin-top:
        18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    padding:
        0 15px !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,0.95) !important;

    color:
        #17384f !important;

    font-size:
        11px !important;

    font-weight:
        750 !important;
}
}















/* ===================================================== BBA CARS — BLOG MOBILE FINAL / CONCEPT 3 ===================================================== */
@media (max-width: 720px) {
.blog-page {
    background:
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #ffffff 20%,
            #f8fbfd 100%
        ) !important;
}


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

.blog-hero {
    width: 100% !important;

    padding:
        30px 12px 32px !important;

    border-bottom:
        none !important;

    background:
        transparent !important;
}


.blog-hero-inner {
    width: 100% !important;

    margin: 0 !important;

    padding:
        28px 20px !important;

    border-radius:
        24px !important;

    border:
        1px solid rgba(25,70,110,0.07) !important;

    background:
        linear-gradient(
            145deg,
            #edf7ff 0%,
            #f8fbfe 58%,
            #eef5fa 100%
        ) !important;

    box-shadow:
        0 12px 34px
        rgba(25,60,90,0.06) !important;
}


.blog-hero-label {
    margin-bottom:
        11px !important;

    color:
        #6f8799 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.7px !important;
}


.blog-hero h1 {
    max-width:
        330px !important;

    margin:
        0 !important;

    color:
        #102438 !important;

    font-size:
        34px !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -1.2px !important;

    font-weight:
        800 !important;
}


.blog-hero p {
    max-width:
        320px !important;

    margin:
        14px 0 0 !important;

    color:
        #758693 !important;

    font-size:
        11.5px !important;

    line-height:
        1.6 !important;
}



/* =================================================
   ARTICLES SECTION
================================================= */

.blog-articles {
    padding:
        34px 12px !important;

    background:
        transparent !important;
}


.blog-articles-inner {
    width:
        100% !important;

    margin:
        0 !important;
}


.blog-section-head {
    display:
        flex !important;

    align-items:
        flex-end !important;

    justify-content:
        space-between !important;

    gap:
        12px !important;

    margin-bottom:
        18px !important;
}


.blog-section-label {
    display:
        block !important;

    margin-bottom:
        6px !important;

    color:
        #80909c !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.4px !important;
}


.blog-section-head h2 {
    margin:
        0 !important;

    color:
        #102438 !important;

    font-size:
        25px !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -0.6px !important;

    font-weight:
        800 !important;
}


.blog-all-link {
    flex:
        0 0 auto !important;

    color:
        #31678d !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;
}



/* =================================================
   ARTICLE GRID
================================================= */

.blog-articles-grid {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        14px !important;
}



/* =================================================
   FEATURED ARTICLE
================================================= */

.blog-card-featured {
    overflow:
        hidden !important;

    border:
        1px solid rgba(25,70,110,0.07) !important;

    border-radius:
        20px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 9px 26px
        rgba(25,60,90,0.05) !important;
}


.blog-card-featured .blog-card-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        210px !important;

    overflow:hidden !important;
}


.blog-card-featured .blog-card-image img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    display:
        block !important;
}


.blog-card-featured .blog-card-content {
    padding:
        15px !important;
}


.blog-card-meta {
    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        7px !important;

    margin-bottom:
        7px !important;
}


.blog-card-meta span {
    color:
        #8b99a4 !important;

    font-size:
        7.5px !important;

    font-weight:
        800 !important;

    letter-spacing:
        0.9px !important;
}


.blog-card-featured h3 {
    margin:
        0 !important;

    color:
        #183247 !important;

    font-size:
        19px !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -0.3px !important;

    font-weight:
        750 !important;
}


.blog-card-featured p {
    margin:
        9px 0 0 !important;

    color:
        #7d8c97 !important;

    font-size:
        10.5px !important;

    line-height:
        1.55 !important;
}


.blog-card-link {
    display:
        inline-flex !important;

    margin-top:
        11px !important;

    color:
        #245f89 !important;

    font-size:
        10.5px !important;

    font-weight:
        750 !important;
}



/* =================================================
   SIDE ARTICLES
================================================= */

.blog-side-list {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        12px !important;
}


.blog-card-small {
    display:
        grid !important;

    grid-template-columns:
        132px 1fr !important;

    min-height:
        132px !important;

    overflow:
        hidden !important;

    border:
        1px solid rgba(25,70,110,0.07) !important;

    border-radius:
        17px !important;

    background:
        #ffffff !important;

    box-shadow:
        0 7px 20px
        rgba(25,60,90,0.04) !important;
}


.blog-small-image {
    width:
        132px !important;

    height:
        100% !important;

    min-height:
        132px !important;

    overflow:
        hidden !important;
}


.blog-small-image img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    display:
        block !important;
}


.blog-small-content {
    padding:
        12px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;
}


.blog-small-content h3 {
    margin:
        0 !important;

    color:
        #183247 !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;

    font-weight:
        750 !important;
}


.blog-small-content p {
    display:
        none !important;
}


.blog-small-content .blog-card-link {
    margin-top:
        8px !important;
}



/* =================================================
   MORE BLOG
================================================= */

.blog-more {
    padding:
        36px 12px !important;

    background:
        #f6f9fb !important;
}


.blog-more-inner {
    width:
        100% !important;

    margin:
        0 !important;
}


.blog-more-head {
    margin-bottom:
        18px !important;
}


.blog-more-head h2 {
    margin:
        5px 0 0 !important;

    color:
        #102438 !important;

    font-size:
        26px !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -0.7px !important;

    font-weight:
        800 !important;
}


.blog-more-grid {
    display:
        grid !important;

    grid-template-columns:
        1fr !important;

    gap:
        13px !important;
}


.blog-more-card {
    overflow:
        hidden !important;

    border:
        1px solid rgba(25,70,110,0.07) !important;

    border-radius:
        18px !important;

    background:
#ffffff !important;

    box-shadow:
        0 8px 22px
        rgba(25,60,90,0.045) !important;
}


.blog-more-image {
    display:
        block !important;

    width:
        100% !important;

    height:
        185px !important;

    overflow:
        hidden !important;
}


.blog-more-image img {
    width:
        100% !important;

    height:
        100% !important;

    object-fit:
        cover !important;

    display:
        block !important;
}


.blog-more-card > div,
.blog-more-content {
    padding:
        13px 14px 15px !important;
}


.blog-more-card h3 {
    margin:
        6px 0 0 !important;

    color:
        #183247 !important;

    font-size:
        15px !important;

    line-height:
        1.3 !important;

    font-weight:
        750 !important;
}


.blog-more-card p {
    margin:
        8px 0 0 !important;

    color:
        #7d8c97 !important;

    font-size:
        10px !important;

    line-height:
        1.5 !important;
}



/* =================================================
   CTA
================================================= */

.blog-cta {
    padding:
        36px 12px 34px !important;

    background:
        transparent !important;
}


.blog-cta-inner {
    width:
        100% !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        24px 18px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        20px !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #132a3c 0%,
            #0f2233 100%
        ) !important;

    box-shadow:
        0 15px 34px
        rgba(16,36,56,0.14) !important;
}


.blog-cta-label {
    color:
        #8299aa !important;

    font-size:
        8px !important;

    font-weight:
        800 !important;

    letter-spacing:
        1.5px !important;
}


.blog-cta-content h2 {
    margin:
        7px 0 9px !important;

    color:
        #ffffff !important;

    font-size:
        27px !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -0.8px !important;

    font-weight:
        800 !important;
}


.blog-cta-content p {
    margin:
        0 !important;

    color:
        #aab8c2 !important;

    font-size:
        10.5px !important;

    line-height:
        1.55 !important;
}


.blog-cta-action {
    width:
        100% !important;

    min-width:
        0 !important;
}


.blog-cta-button {
    width:
        100% !important;

    height:
        46px !important;

    padding:
        0 14px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    border-radius:
        12px !important;

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

    color:
        #173247 !important;

    font-size:
        11px !important;

    font-weight:
        750 !important;
}


.blog-cta-phone {
    display:
        block !important;

    margin-top:
        10px !important;

    color:
        #8799a7 !important;

    font-size:
        9px !important;
}
}












/* =========================================================
   BBA CARS — KONTAKT MOBILE CONCEPT FINAL
========================================================= */

@media (max-width: 720px) {

    /* PAGE */
    body.contact-page {
        background: #f5f8fc;
    }


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

    .contact-page .contact-hero {
        padding: 28px 16px 110px !important;
        background: #f5f8fc !important;
    }

    .contact-page .contact-hero-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;

        display: block !important;
    }


    /* eski kichik label */

    .contact-page .contact-eyebrow {
        display: none !important;
    }


    /* TITLE */

    .contact-page .contact-hero-main h1 {
        margin: 0 !important;
        max-width: none !important;

        font-size: 28px !important;
        line-height: 1.1 !important;

        font-weight: 750 !important;
        letter-spacing: -0.8px !important;

        color: #0d1c2d !important;
    }


    /* DESCRIPTION */

    .contact-page .contact-intro {
        max-width: 330px !important;

        margin: 8px 0 24px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        color: #738295 !important;
    }


    /* =====================================================
       CONTACT CARDS
    ===================================================== */

    .contact-page .contact-hero-info {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 10px !important;

        border: none !important;
    }


    .contact-page .contact-info-row {
        position: relative !important;

        width: 100% !important;
        min-height: 78px !important;

        display: flex !important;
        align-items: center !important;

        padding: 14px 14px 14px 68px !important;

        border: 1px solid #e8edf3 !important;
        border-radius: 14px !important;

        background: #ffffff !important;

        box-shadow:
            0 4px 16px rgba(24, 53, 84, 0.035) !important;
    }


    /* chapdagi 01 / 02 / 03 yashiramiz */

    .contact-page .contact-info-number {
        display: none !important;
    }


    /* =====================================================
       BLUE ICON BOX
    ===================================================== */

    .contact-page .contact-info-row::before {
        content: "";

        position: absolute;

        left: 14px;
        top: 50%;

        width: 40px;
        height: 40px;

        transform: translateY(-50%);

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

        border-radius: 10px;

        background: #1677ff;

        color: #ffffff;

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

        box-shadow:
            0 6px 16px rgba(22, 119, 255, 0.20);
    }


    /* PHONE ICON */

    .contact-page .contact-info-row:nth-child(1)::before {
        content: "☎";
    }


    /* WORK TIME ICON */

    .contact-page .contact-info-row:nth-child(2)::before {
        content: "◷";
    }


    /* LOCATION ICON */

    .contact-page .contact-info-row:nth-child(3)::before {
        content: "●";
        font-size: 14px;
    }


    /* LABEL */

    .contact-page .contact-info-label {
        display: block !important;

        margin: 0 0 4px !important;

        font-size: 8px !important;
        line-height: 1 !important;

        font-weight: 700 !important;

        letter-spacing: 1.2px !important;

        color: #9ba8b7 !important;
    }


    /* MAIN CONTACT TEXT */

    .contact-page .contact-info-row a,
    .contact-page .contact-info-row p {
        margin: 0 !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        font-weight: 700 !important;

        color: #152334 !important;
    }


    /* =====================================================
       CURRENT SECOND SECTION
       conceptga mos bo‘lmagani uchun vaqtincha yashiramiz
    ===================================================== */

    .contact-page .contact-request {
        display: none !important;
    }


    /* =====================================================
       FOOTER
       MOBILE CONCEPTDA ASOSIY KATTA FOOTER YO'Q
    ===================================================== */

    .contact-page .site-footer {
        display: none !important;
    }


    /* =====================================================
       BOTTOM NAV USTIGA CONTENT KIRIB KETMASIN
    ===================================================== */

    .contact-page main {
        padding-bottom: 20px;
    }

}





/* =========================================================
   BBA CARS — MOBILE CONTACT REFERENCE
========================================================= */

.mobile-contact-final {
    display: none;
}

@media (max-width: 720px) {

    /* ESKI CONTACT QISMLARI */

    .contact-page .contact-hero,
    .contact-page .contact-request,
    .contact-page .site-footer {
        display: none !important;
    }


    /* PAGE */

    body.contact-page {
        background: #f4f7fb !important;
    }

    .contact-page main {
        padding-bottom: 110px !important;
    }


    /* MAIN CONTACT */

    .mobile-contact-final {
        display: block;

        width: 100%;
        box-sizing: border-box;

        padding: 28px 16px 30px;

        background: #f4f7fb;
    }


    /* TITLE */

    .mobile-contact-head {
        margin-bottom: 22px;
    }

    .mobile-contact-head h1 {
        margin: 0 0 5px;

        color: #0c1929;

        font-size: 27px;
        line-height: 1.05;

        font-weight: 800;
        letter-spacing: -0.8px;
    }

    .mobile-contact-head p {
        margin: 0;

        max-width: 330px;

        color: #718096;

        font-size: 11px;
        line-height: 1.5;
    }


    /* CONTACT LIST */

    .mobile-contact-list {
        display: flex;
        flex-direction: column;

        gap: 9px;

        margin-bottom: 17px;
    }


    /* CARD */

    .mobile-contact-card {
        width: 100%;
        min-height: 72px;

        box-sizing: border-box;

        display: flex;
        align-items: center;

        gap: 13px;

        padding: 11px 13px;

        background: #ffffff;

        border: 1px solid #e8edf4;
        border-radius: 12px;

        box-shadow: 0 3px 12px rgba(20, 48, 82, 0.035);

        text-decoration: none;
    }


    /* BLUE ICON */

    .mobile-contact-icon {
        flex: 0 0 42px;

        width: 42px;
        height: 42px;

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

        border-radius: 10px;

        background: #1677ff;

        box-shadow: 0 5px 13px rgba(22, 119, 255, .18);
    }

    .mobile-contact-icon svg {
        width: 19px;
        height: 19px;

        fill: none;
        stroke: #ffffff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    /* TEXT */

    .mobile-contact-text {
        min-width: 0;

        display: flex;
        flex-direction: column;

        gap: 4px;
    }

    .mobile-contact-text strong {
        color: #101d2d;

        font-size: 13px;
        line-height: 1.25;

        font-weight: 750;
    }

    .mobile-contact-text span {
        color: #8491a2;

        font-size: 10px;
        line-height: 1.3;

        font-weight: 500;
    }


    /* ==========================
       MAP
    ========================== */

    .mobile-contact-map {
        position: relative;

        width: 100%;
        height: 170px;

        overflow: hidden;

        margin-top: 5px;

        border: 1px solid #e5eaf0;
        border-radius: 13px;

        background:
            linear-gradient(25deg,
                transparent 46%,
                #ffffff 47%,
                #ffffff 52%,
                transparent 53%),
            linear-gradient(-32deg,
                transparent 43%,
                #ffffff 44%,
                #ffffff 49%,
                transparent 50%),
            #e9edf0;
    }


    /* MAP GRID */

    .map-grid {
        position: absolute;
        inset: 0;

        opacity: .45;

        background-image:
            linear-gradient(#d6dde4 1px, transparent 1px),
            linear-gradient(90deg, #d6dde4 1px, transparent 1px);

        background-size: 42px 42px;

        transform: rotate(-8deg) scale(1.2);
    }


    /* PIN */

    .map-pin {
        position: absolute;

        left: 50%;
        top: 48%;

        width: 30px;
        height: 30px;

        transform:
            translate(-50%, -50%)
            rotate(45deg);

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

        border-radius: 50% 50% 50% 5px;

        background: #ff3148;

        box-shadow: 0 5px 12px rgba(255, 49, 72, .25);
    }

    .map-pin span {
        width: 9px;
        height: 9px;

        border-radius: 50%;

        background: #ffffff;
    }


    /* BBA CARS LABEL */

    .map-label {
        position: absolute;

        left: calc(50% + 22px);
        top: calc(48% - 13px);

        padding: 7px 10px;

        border-radius: 7px;

        background: #ffffff;

        color: #142235;

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

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


    /* ROUTE BUTTON */

    .mobile-contact-route {
        width: 100%;
        min-height: 52px;

        box-sizing: border-box;

        margin-top: 13px;

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

        border-radius: 11px;

        background: #081b31;

        color: #ffffff;

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

        text-decoration: none;

        transition:
            transform .15s ease,
            opacity .15s ease;
    }

    .mobile-contact-route:active {
        transform: scale(.985);
        opacity: .9;
    }

}







/* =========================================================
   KONTAKT MOBILE — FINAL VISUAL POLISH
========================================================= */

@media (max-width: 720px) {

    /* SECTION */
    .mobile-contact-final {
        padding: 26px 16px 28px !important;
    }

    /* HEADER */
    .mobile-contact-head {
        margin-bottom: 18px !important;
    }

    .mobile-contact-head h1 {
        font-size: 26px !important;
        font-weight: 800 !important;
        letter-spacing: -0.8px !important;
    }

    .mobile-contact-head p {
        margin-top: 6px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }


    /* =========================
       CONTACT CARDS
    ========================= */

    .mobile-contact-list {
        gap: 9px !important;
        margin-bottom: 14px !important;
    }

    .mobile-contact-card {
        min-height: 68px !important;

        padding: 10px 12px !important;

        background: #ffffff !important;

        border: 1px solid #e2e9f1 !important;
        border-radius: 13px !important;

        box-shadow:
            0 4px 14px rgba(24, 48, 78, 0.055) !important;
    }

    .mobile-contact-icon {
        width: 40px !important;
        height: 40px !important;
        flex-basis: 40px !important;

        border-radius: 10px !important;
    }

    .mobile-contact-icon svg {
        width: 18px !important;
        height: 18px !important;
    }

    .mobile-contact-text strong {
        font-size: 13px !important;
        font-weight: 750 !important;
    }

    .mobile-contact-text span {
        font-size: 10px !important;
    }


    /* =========================
       MAP — STRONGER
    ========================= */

    .mobile-contact-map {
        position: relative !important;

        height: 170px !important;

        margin-top: 14px !important;

        overflow: hidden !important;

        border: 1px solid #dfe6ed !important;
        border-radius: 13px !important;

        background:
            linear-gradient(
                135deg,
                transparent 0 22%,
                #d9e0e6 22.5% 24%,
                transparent 24.5% 100%
            ),
            linear-gradient(
                45deg,
                transparent 0 34%,
                #d5dde4 34.5% 36%,
                transparent 36.5% 100%
            ),
            linear-gradient(
                -28deg,
                transparent 0 58%,
                #d8e0e6 58.5% 60%,
                transparent 60.5% 100%
            ),
            #edf1f4 !important;
    }

    .mobile-contact-map .map-grid {
        opacity: 0.75 !important;

        background-image:
            linear-gradient(
                rgba(185, 196, 207, 0.42) 1px,
                transparent 1px
            ),
            linear-gradient(
                90deg,
                rgba(185, 196, 207, 0.42) 1px,
                transparent 1px
            ) !important;

        background-size: 34px 34px !important;
    }


    /* fake green road/park details */

    .mobile-contact-map::before {
        content: "";

        position: absolute;

        width: 190px;
        height: 34px;

        left: -20px;
        top: 92px;

        border-radius: 50%;

        border-top: 4px solid rgba(88, 183, 111, 0.65);

        transform: rotate(-14deg);

        z-index: 2;
    }

    .mobile-contact-map::after {
        content: "";

        position: absolute;

        width: 170px;
        height: 20px;

        right: -28px;
        top: 35px;

        border-top: 5px solid rgba(255, 255, 255, 0.95);

        transform: rotate(24deg);

        z-index: 2;
    }


    /* =========================
       PIN
    ========================= */

    .map-pin {
        z-index: 5 !important;

        width: 28px !important;
        height: 28px !important;

        left: 48% !important;
        top: 53% !important;

        background: #f2384e !important;

        box-shadow:
            0 5px 13px rgba(242, 56, 78, 0.28) !important;
    }

    .map-label {
        z-index: 5 !important;

        left: calc(48% + 22px) !important;
        top: calc(53% - 14px) !important;

        padding: 6px 9px !important;

        font-size: 9px !important;

        border: 1px solid #e7ebef !important;
        border-radius: 7px !important;

        box-shadow:
            0 4px 12px rgba(20, 30, 40, 0.08) !important;
    }


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

    .mobile-contact-route {
        min-height: 50px !important;

        margin-top: 12px !important;

        border-radius: 11px !important;

        background: #071a30 !important;

        font-size: 12px !important;
        font-weight: 700 !important;
    }

}











/* =========================================================
   BBA CARS — HOME MOBILE FINAL
   720px VA PAST
========================================================= */

@media (max-width: 720px) {

    /* =====================================================
       PAGE
    ===================================================== */

    html,
    body {
        overflow-x: hidden;
    }

    body {
        background: #f5f7fa;
    }


    /* =====================================================
       HERO — FINAL
    ===================================================== */

    .hero {
        width: calc(100% - 24px) !important;
        margin: 12px auto 0 !important;

        overflow: hidden !important;

        border: 0 !important;
        border-radius: 20px !important;

        background:
            linear-gradient(
                145deg,
                #60aee7 0%,
                #91c8ed 52%,
                #c7e2f4 100%
            ) !important;
    }

    .hero-inner {
        width: 100% !important;
        height: auto !important;

        padding: 28px 18px 0 !important;

        display: flex !important;
        flex-direction: column !important;

        box-sizing: border-box !important;
    }


    /* TITLE */

    .hero-content h1 {
        max-width: 350px !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 31px !important;
        line-height: 1.03 !important;

        font-weight: 800 !important;
        letter-spacing: -1.4px !important;
    }

    .hero-content h1 span {
        white-space: normal !important;
    }


    /* DESCRIPTION */

    .hero-description {
        max-width: 320px !important;

        margin-top: 13px !important;

        color: rgba(255,255,255,.88) !important;

        font-size: 11px !important;
        line-height: 1.55 !important;
    }


    /* HERO BUTTONS ESKI BO'LSA */

    .hero-buttons {
        display: none !important;
    }


    /* =====================================================
       SEARCH
    ===================================================== */

    .search-section {
        padding: 0 !important;
    }

    .search-panel {
        width: 100% !important;

        margin: 20px 0 0 !important;
        padding: 0 !important;

        display: block !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .search-input-wrap {
        width: 100% !important;
        height: 52px !important;

        padding: 0 15px !important;

        border: 0 !important;
        border-radius: 13px !important;

        background: rgba(255,255,255,.94) !important;

        box-shadow:
            0 5px 16px rgba(23, 67, 103, .08) !important;
    }

    .search-input-wrap input {
        font-size: 12px !important;
    }


    /* =====================================================
       HERO FILTER BUTTONS
    ===================================================== */

    .hero .custom-select,
    .hero .search-select {
        min-width: 0 !important;
    }

    .hero-filter-tabs,
    .hero-type-tabs {
        width: 100%;

        margin-top: 12px;

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

        gap: 7px;
    }

    .hero-filter-tabs button,
    .hero-type-tabs button {
        min-width: 0;
        height: 43px;

        padding: 0 5px;

        border: 1px solid rgba(255,255,255,.42);
        border-radius: 10px;

        background: rgba(255,255,255,.13);
        color: #ffffff;

        font-size: 10px;
        font-weight: 650;
    }

    .hero-filter-tabs button.active,
    .hero-type-tabs button.active {
        background: #071a30;
        border-color: #071a30;
        color: #ffffff;
    }


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

    .hero-visual {
        width: 100% !important;
        height: 210px !important;

        margin: 10px 0 0 !important;

        overflow: visible !important;

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

    .hero-car-image {
        width: 120% !important;
        height: 100% !important;

        max-width: none !important;

        object-fit: contain !important;
        object-position: center !important;

        transform: none !important;
    }

    .hero-visual::after {
        display: none !important;
    }


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

    .hero-stats {
        width: calc(100% - 36px) !important;
        height: 72px !important;

        margin: -3px auto 15px !important;
        padding: 0 10px !important;

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

        gap: 0 !important;

        position: relative;
        z-index: 5;

        border: 1px solid rgba(255,255,255,.52);
        border-radius: 13px;

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

        box-shadow:
            0 7px 20px rgba(35, 70, 100, .06);
    }

    .hero-stat {
        min-width: 0;

        display: block !important;

        text-align: center !important;
    }

    .hero-stat:not(:last-child) {
        border-right: 1px solid rgba(30,60,90,.08);
    }

    .hero-stat-icon {
        display: none !important;
    }

    .hero-stat-text {
        height: 100%;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;
    }

    .hero-stat-text strong {
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 800 !important;

        color: #102238 !important;
    }

    .hero-stat-text span {
        max-width: 70px;

        font-size: 7.5px !important;
        line-height: 1.2 !important;

        color: #738195 !important;

        white-space: normal !important;
    }


    /* =====================================================
       MASHHUR AVTOMOBILLAR
       faqat HOME
    ===================================================== */

    body:not(.cars-page) .cars-section {
        padding: 30px 0 38px !important;

        background: #ffffff !important;
    }

    body:not(.cars-page) .cars-section-inner {
        width: 100% !important;

        padding: 0 16px !important;

        box-sizing: border-box !important;
    }

    body:not(.cars-page) .cars-section-header {
        margin-bottom: 16px !important;
    }

    body:not(.cars-page) .cars-section-header h2 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: -0.3px !important;
    white-space: nowrap !important;
}

body:not(.cars-page) .cars-view-all {
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #4d5f6d !important;
    white-space: nowrap !important;
    opacity: 1 !important;
}


    


    /* =====================================================
       NASIYA HOME SECTION
    ===================================================== */

    .installment-section {
        padding: 54px 14px !important;

        background: #f4f5f5 !important;
    }

    .installment-section .container {
        width: 100% !important;
    }

    .installment-box {
        width: 100% !important;

        padding: 0 !important;

        display: block !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
    }


    /* COPY */

    .installment-content {
        max-width: none !important;
    }

    .installment-content .section-label {
        margin-bottom: 13px !important;

        font-size: 10px !important;
        letter-spacing: 2px !important;
    }

    .installment-content h2 {
        max-width: 350px !important;

        margin: 0 !important;

        font-size: 38px !important;
        line-height: 1.04 !important;

        letter-spacing: -1.5px !important;
    }

    .installment-content > p {
        margin-top: 20px !important;

        font-size: 13px !important;
        line-height: 1.65 !important;
    }


    /* BENEFITS */

    .installment-benefits {
        margin-top: 30px !important;

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

        gap: 8px !important;
    }

    .installment-benefit {
        display: block !important;

        font-size: 10px !important;
        line-height: 1.35 !important;
    }

    .installment-benefit span {
        margin-bottom: 7px !important;
    }


    /* APPLY BUTTON */

    .installment-apply-btn {
        width: 100% !important;
        min-height: 56px !important;

        margin-top: 28px !important;
        padding: 0 18px !important;

        border-radius: 11px !important;

        font-size: 12px !important;
    }


    /* BLACK NASIYA CARD */

    .installment-card {
        width: 100% !important;
        min-height: 360px !important;

        margin-top: 46px !important;
        padding: 28px 24px !important;

        border-radius: 22px !important;

        box-sizing: border-box !important;
    }

    .installment-card h3 {
        margin-top: 30px !important;

        font-size: 25px !important;
    }


    /* =====================================================
       NEGA BBA CARS
    ===================================================== */

    .why-bba {
        padding: 56px 16px !important;

        background: #ffffff !important;
    }

    .why-bba-container {
        width: 100% !important;
    }

    .why-bba-heading {
        max-width: none !important;

        margin-bottom: 28px !important;
    }

    .why-bba-kicker {
        margin-bottom: 12px !important;

        font-size: 9px !important;
        letter-spacing: 2.2px !important;
    }

    .why-bba-heading h2 {
        max-width: 360px !important;

        font-size: 36px !important;
        line-height: 1.03 !important;

        font-weight: 800 !important;
        letter-spacing: -1.3px !important;
    }

    .why-bba-heading p {
        max-width: 340px !important;

        margin-top: 18px !important;

        font-size: 13px !important;
        line-height: 1.6 !important;
    }


    /* WHY GRID */

    .why-bba-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 9px !important;
    }


    /* WHY CARD — IXCHAM */

    .why-bba-card {
        min-height: 0 !important;

        padding: 18px !important;

        display: grid !important;
        grid-template-columns: 42px 1fr !important;
        grid-template-rows: auto auto !important;

        column-gap: 14px !important;
        row-gap: 4px !important;

        border: 1px solid #e7ebef !important;
        border-radius: 14px !important;

        background: #fbfcfd !important;

        box-shadow: none !important;
    }

    .why-bba-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .why-bba-icon {
        grid-row: 1 / 3 !important;

        width: 40px !important;
        height: 40px !important;

        margin: 0 !important;

        border-radius: 10px !important;

        font-size: 16px !important;
    }

    .why-bba-card h3 {
        align-self: end;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;
    }

    .why-bba-card p {
        margin: 0 !important;

        font-size: 11px !important;
        line-height: 1.45 !important;

        color: #788493 !important;
    }


    /* =====================================================
       MASHHUR BRENDLAR
    ===================================================== */

    .home-brands {
        padding: 54px 0 36px !important;

        background: #f7f8fa !important;
    }

    .home-brands-container {
        width: 100% !important;
    }

    .home-brands-header {
        display: block !important;

        padding: 0 16px !important;
        margin-bottom: 24px !important;
    }

    .home-brands-kicker {
        margin-bottom: 11px !important;

        font-size: 9px !important;
        letter-spacing: 2.2px !important;
    }

    .home-brands-header h2 {
        max-width: 340px !important;

        font-size: 36px !important;
        line-height: 1.03 !important;

        font-weight: 800 !important;
        letter-spacing: -1.3px !important;
    }

    .home-brands-header > p {
        max-width: 350px !important;

        margin-top: 17px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }


    /* BRAND MARQUEE */

    .brands-marquee {
        width: 100% !important;

        padding: 5px 0 10px !important;

        overflow: hidden !important;
    }

    .brands-track {
        animation-duration: 24s !important;
    }

    .brand-logo-item {
        flex: 0 0 115px !important;
        height: 100px !important;

        gap: 9px !important;

        border-right: 1px solid #e6e9ec !important;
    }

    .brand-logo-item img {
        width: 58px !important;
        height: 42px !important;

        object-fit: contain !important;
    }

    .brand-logo-item span {
        font-size: 8.5px !important;

        letter-spacing: .8px !important;
    }

    .brands-marquee::before,
    .brands-marquee::after {
        width: 24px !important;
    }


    /* =====================================================
       HOME FOOTER
    ===================================================== */

    .site-footer {
        padding-bottom: 78px;
    }


    /* =====================================================
       FIXED BOTTOM NAV CONTENTNI YOPMASIN
    ===================================================== */

    body {
        padding-bottom: 74px;
    }

}


/* =========================================================
   SMALL PHONE 390px VA PAST
========================================================= */

@media (max-width: 390px) {

    .hero-content h1 {
        font-size: 28px !important;
    }

    .hero-visual {
        height: 190px !important;
    }

    .hero-stats {
        width: calc(100% - 28px) !important;
    }

    body:not(.cars-page) .car-card-media {
        height: 170px !important;
    }

    .installment-content h2,
    .why-bba-heading h2,
    .home-brands-header h2 {
        font-size: 33px !important;
    }

}










/* =========================================================
   BBA CARS — COMPARE MOBILE FINAL
========================================================= */

@media (max-width: 720px) {

    /* PAGE */
    .compare-page {
        background: #f5f8fc !important;
    }

    .compare-page .compare-main {
        padding-bottom: 20px !important;
    }


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

    .compare-page .compare-hero {
        padding: 28px 16px 18px !important;

        background: #f5f8fc !important;
    }

    .compare-page .compare-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .compare-page .compare-back-link {
        display: inline-flex !important;
        align-items: center !important;

        margin-bottom: 18px !important;

        color: #7c8997 !important;

        font-size: 10px !important;
        line-height: 1 !important;

        font-weight: 600 !important;
    }

    .compare-page .compare-hero h1 {
        max-width: 340px !important;

        margin: 0 !important;

        color: #0f1d2d !important;

        font-size: 32px !important;
        line-height: 1.02 !important;

        font-weight: 800 !important;
        letter-spacing: -1.2px !important;
    }

    .compare-page .compare-hero p {
        max-width: 330px !important;

        margin: 12px 0 0 !important;

        color: #758394 !important;

        font-size: 12px !important;
        line-height: 1.55 !important;
    }


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

    .compare-page .compare-section {
        padding: 8px 16px 24px !important;
    }

    .compare-page .compare-grid {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: transparent !important;
    }


    /* =====================================================
       EMPTY STATE
    ===================================================== */

    .compare-page .compare-empty {
        width: 100% !important;
        min-height: 300px !important;

        padding: 34px 22px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        border: 1px solid #e4eaf0 !important;
        border-radius: 16px !important;

        background: #ffffff !important;

        box-shadow:
            0 5px 18px rgba(19, 45, 73, .035) !important;

        text-align: center !important;
    }

    .compare-page .compare-empty-icon {
        width: 46px !important;
        height: 46px !important;

        margin-bottom: 18px !important;

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

        border-radius: 13px !important;

        background: #edf5ff !important;
        color: #1677ff !important;

        font-size: 21px !important;
    }

    .compare-page .compare-empty h3 {
        margin: 0 0 8px !important;

        color: #102033 !important;

        font-size: 20px !important;
        line-height: 1.2 !important;

        font-weight: 750 !important;
        letter-spacing: -0.4px !important;
    }

    .compare-page .compare-empty p {
        max-width: 280px !important;

        margin: 0 !important;

        color: #8290a0 !important;

        font-size: 11px !important;
        line-height: 1.55 !important;
    }

    .compare-page .compare-empty-btn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 230px !important;

        height: 48px !important;

        margin-top: 22px !important;

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

        border-radius: 11px !important;

        background: #081b31 !important;
        color: #ffffff !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        box-shadow:
            0 6px 16px rgba(8, 27, 49, .10) !important;
    }

    .compare-page .compare-empty-btn:hover {
        transform: none !important;
        background: #081b31 !important;
    }

    .compare-page .compare-empty-btn:active {
        transform: scale(.985) !important;
    }


    /* DESKTOP FOOTER MOBILEDA KERAK EMAS */

    .compare-page .site-footer {
        display: none !important;
    }

}



/* =========================================================
   BBA CARS — COMPARE MOBILE RESULT FINAL
========================================================= */

@media (max-width: 720px) {

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

    .compare-page .compare-hero {
        padding: 24px 16px 14px !important;
    }

    .compare-page .compare-back-link {
        margin-bottom: 15px !important;
        font-size: 9.5px !important;
    }

    .compare-page .compare-hero h1 {
        font-size: 30px !important;
        line-height: 1.02 !important;
    }

    .compare-page .compare-hero p {
        margin-top: 10px !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }


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

    .compare-page .compare-section {
        padding: 10px 12px 24px !important;
    }

    .compare-page .compare-container {
        width: 100% !important;
        max-width: none !important;
    }


    /* =========================
       GRID — ENG MUHIM JOY
    ========================= */

    .compare-page .compare-grid {
        width: 100% !important;

        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        overflow: visible !important;

        gap: 8px !important;

        min-height: 0 !important;
    }

    .compare-page .compare-grid[data-count="1"] {
        grid-template-columns: 1fr !important;
    }

    .compare-page .compare-grid[data-count="2"] {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .compare-page .compare-grid[data-count="3"] {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
    }


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

    .compare-page .compare-car-card {
        min-width: 0 !important;

        padding: 8px !important;

        border: 1px solid #e4eaf0 !important;
        border-radius: 13px !important;

        background: #ffffff !important;

        box-shadow:
            0 4px 14px rgba(20, 45, 70, .035) !important;
    }

    .compare-page .compare-car-card:last-child {
        border-right: 1px solid #e4eaf0 !important;
    }


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

    .compare-page .compare-car-image {
        width: 100% !important;
        height: 120px !important;

        border-radius: 9px !important;

        background: #f1f4f7 !important;
    }

    .compare-page .compare-car-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =========================
       REMOVE X
    ========================= */

    .compare-page .compare-remove-btn {
        top: 11px !important;
        right: 11px !important;

        width: 27px !important;
        height: 27px !important;

        border-radius: 8px !important;

        font-size: 17px !important;

        background: rgba(255,255,255,.92) !important;

        box-shadow:
            0 3px 10px rgba(0,0,0,.08) !important;
    }


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

    .compare-page .compare-car-content {
        padding-top: 10px !important;
    }

    .compare-page .compare-car-content h2 {
        min-height: 34px !important;

        font-size: 12px !important;
        line-height: 1.3 !important;

        font-weight: 750 !important;
        letter-spacing: -0.2px !important;
    }

    .compare-page .compare-car-price {
        margin-top: 6px !important;

        font-size: 12px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;
    }


    /* =========================
       SECTION TITLE
    ========================= */

    .compare-page .compare-spec-group-title {
        margin-top: 15px !important;
        padding: 8px 0 !important;

        font-size: 9.5px !important;
        line-height: 1.2 !important;

        border-bottom: 1px solid #e4e8ec !important;
    }


    /* =========================
       SPECS
    ========================= */

    .compare-page .compare-spec-list {
        margin-top: 14px !important;
    }

    .compare-page .compare-spec-row {
        min-height: 44px !important;

        padding: 8px 0 !important;

        display: block !important;
    }

    .compare-page .compare-spec-row span {
        display: block !important;

        margin-bottom: 4px !important;

        color: #8b97a4 !important;

        font-size: 8.5px !important;
        line-height: 1.2 !important;
    }

    .compare-page .compare-spec-row strong {
        display: block !important;

        max-width: 100% !important;

        color: #172638 !important;

        font-size: 10px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;

        text-align: left !important;

        word-break: break-word !important;
    }


    /* =========================
       BATAFSIL
    ========================= */

    .compare-page .compare-car-details {
        margin-top: 13px !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        color: #536273 !important;
    }


    /* =========================
       1 TA CAR HOLATI
    ========================= */

    .compare-page
    .compare-grid[data-count="1"]
    .compare-car-card {

        max-width: 100% !important;
    }

    .compare-page
    .compare-grid[data-count="1"]
    .compare-car-image {

        height: 210px !important;
    }

    .compare-page
    .compare-grid[data-count="1"]
    .compare-car-content h2 {

        min-height: 0 !important;

        font-size: 16px !important;
    }

    .compare-page
    .compare-grid[data-count="1"]
    .compare-car-price {

        font-size: 15px !important;
    }

}




/* =========================================================
   BBA CARS — COMPARE MOBILE COMPACT FINAL
========================================================= */

@media (max-width: 720px) {

    /* HERO yanada ixcham */
    .compare-page .compare-hero {
        padding-bottom: 10px !important;
    }

    .compare-page .compare-section {
        padding-top: 6px !important;
    }

    /* CAR CARD */
    .compare-page .compare-car-card {
        padding: 7px !important;
    }

    .compare-page .compare-car-image {
        height: 105px !important;
    }

    .compare-page .compare-car-content h2 {
        min-height: 32px !important;
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }

    .compare-page .compare-car-price {
        font-size: 11.5px !important;
    }

    /* GROUP TITLE */
    .compare-page .compare-spec-group-title {
        margin-top: 12px !important;
        padding: 7px 0 !important;

        font-size: 9px !important;
        font-weight: 800 !important;

        color: #152335 !important;
    }

    /* SPECS */
    .compare-page .compare-spec-list {
        margin-top: 10px !important;
    }

    .compare-page .compare-spec-row {
        min-height: 36px !important;

        padding: 6px 0 !important;

        border-bottom: 1px solid #edf0f3 !important;
    }

    .compare-page .compare-spec-row span {
        margin-bottom: 2px !important;

        font-size: 7.5px !important;
        line-height: 1.15 !important;

        color: #96a1ad !important;
    }

    .compare-page .compare-spec-row strong {
        font-size: 9px !important;
        line-height: 1.2 !important;

        font-weight: 700 !important;

        color: #172638 !important;
    }

    /* BATAFSIL */
    .compare-page .compare-car-details {
        margin-top: 10px !important;
        font-size: 8.5px !important;
    }

    /* x button */
    .compare-page .compare-remove-btn {
        width: 24px !important;
        height: 24px !important;

        top: 9px !important;
        right: 9px !important;

        font-size: 15px !important;
    }

    /* compare grid card gap */
    .compare-page .compare-grid {
        gap: 6px !important;
    }
}


/* =========================================================
   BBA CARS — COMPARE BAR MOBILE FINAL
========================================================= */

@media (max-width: 720px) {

    .compare-bar {
        left: 12px !important;
        right: 12px !important;

        bottom: 76px !important;

        width: auto !important;

        transform: translateY(20px) !important;

        border-radius: 16px !important;

        background: rgba(8, 27, 49, 0.97) !important;

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

        box-shadow:
            0 14px 34px rgba(8,27,49,.22) !important;

        backdrop-filter:
            blur(18px) saturate(140%) !important;

        -webkit-backdrop-filter:
            blur(18px) saturate(140%) !important;

        z-index: 9998 !important;
    }


    .compare-bar.show {
        transform: translateY(0) !important;
    }


    /* INNER */

    .compare-bar-inner {
        min-height: 0 !important;

        padding: 11px !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto !important;

        align-items: center !important;

        gap: 7px !important;
    }


    /* TEXT */

    .compare-bar-info {
        min-width: 0 !important;

        gap: 2px !important;
    }

    .compare-bar-info strong {
        font-size: 12px !important;
        line-height: 1.2 !important;

        font-weight: 750 !important;

        color: #ffffff !important;
    }

    .compare-bar-info span {
        max-width: 120px !important;

        font-size: 8.5px !important;
        line-height: 1.25 !important;

        color:
            rgba(255,255,255,.58) !important;

        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* ACTIONS */

    .compare-bar-actions {
        display: contents !important;
    }


    /* CLEAR */

    .compare-clear-btn {
        height: 38px !important;

        padding: 0 11px !important;

        border-radius: 9px !important;

        border:
            1px solid rgba(255,255,255,.16) !important;

        background:
            rgba(255,255,255,.05) !important;

        color: #ffffff !important;

        font-size: 9.5px !important;
        font-weight: 650 !important;
    }


    /* OPEN */

    .compare-open-btn {
        height: 38px !important;

        padding: 0 12px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        border: 0 !important;
        border-radius: 9px !important;

        background: #ffffff !important;

        color: #102438 !important;

        font-size: 9.5px !important;
        font-weight: 750 !important;
    }


    /* TOUCH */

    .compare-clear-btn:active,
    .compare-open-btn:active {
        transform: scale(.97) !important;
    }

}


@media (max-width: 720px) {

    .compare-open-btn {
        min-width: 105px !important;
        padding: 0 14px !important;

        white-space: nowrap !important;
    }

    .compare-clear-btn {
        min-width: 82px !important;

        white-space: nowrap !important;
    }

}



/* =========================================================
   COMPARE MOBILE — EMPTY STATE NO SCROLL
========================================================= */

@media (max-width: 720px) {

    /* umumiy compare sahifa */
    .compare-page {
        min-height: 100dvh !important;
    }

    .compare-page .compare-main {
        min-height: 0 !important;
    }

    /* section keragidan ortiq cho'zilmasin */
    .compare-page .compare-section {
        min-height: 0 !important;
        padding-bottom: 18px !important;
    }

    /* empty grid */
    .compare-page .compare-grid[data-count="0"] {
        min-height: 0 !important;
        height: auto !important;
    }

    /* empty card */
    .compare-page .compare-empty {
        min-height: 260px !important;
        height: auto !important;

        padding: 28px 20px !important;
        margin-bottom: 0 !important;
    }

    /* footer mobil compare sahifada yo'q */
    .compare-page .site-footer {
        display: none !important;
    }
}



/* =====================================================
   MOBILE FILTER — BOTTOM NAV USTIDA FINAL
===================================================== */

@media (max-width: 720px) {

    .mobile-filter-sheet {
        bottom: calc(64px + 10px + env(safe-area-inset-bottom)) !important;

        max-height: calc(
            100dvh - 62px - 64px - 28px - env(safe-area-inset-bottom)
        ) !important;
    }

    .mobile-filter-sheet-body {
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-filter-sheet-actions {
        flex-shrink: 0 !important;
    }
}







/* =====================================================
   MOBILE FILTER DROPDOWNS — SCROLL FINAL FIX
===================================================== */

@media (max-width: 720px) {

    /* dropdown parent */
    #mobileBrandSelect,
    #mobileTypeSelect {
        position: relative !important;
    }


    /* IKKALA OCHILADIGAN OYNA */
    #mobileBrandMenu,
    #mobileTypeMenu {
        height: auto !important;
        max-height: 210px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain !important;

        -webkit-overflow-scrolling: touch !important;

        touch-action: pan-y !important;

        pointer-events: auto !important;

        scrollbar-width: thin;

        z-index: 500 !important;
    }


    /* BRAND — pastga ochiladi */
    #mobileBrandMenu {
        top: calc(100% + 8px) !important;
        bottom: auto !important;
    }


    /* TYPE — tepaga ochiladi */
    #mobileTypeMenu {
        top: auto !important;
        bottom: calc(100% + 8px) !important;
    }


    /* OPTIONLAR SCROLLNI TO'SMASIN */
    #mobileBrandMenu .mobile-custom-select-option,
    #mobileTypeMenu .mobile-custom-select-option {
        min-height: 42px !important;

        flex-shrink: 0 !important;

        touch-action: manipulation !important;
    }


    /* dropdown ochilganda uning z-indexi eng tepada */
    #mobileBrandSelect:has(#mobileBrandMenu.active),
    #mobileTypeSelect:has(#mobileTypeMenu.active) {
        z-index: 1000 !important;
    }


    /* Dropdown ichida scroll qilganda
       butun filter oynasi yurib ketmasin */
    .mobile-filter-sheet-body:has(.mobile-custom-select-menu.active) {
        overflow: visible !important;
        touch-action: none;
    }

    .mobile-filter-sheet-body:has(.mobile-custom-select-menu.active)
    .mobile-custom-select-menu {
        touch-action: pan-y !important;
    }

}






/* =====================================================
   HOME MOBILE — SEARCH FIX
===================================================== */

@media (max-width: 720px) {

    .concept3-search input {
        flex: 1;
        min-width: 0;

        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        background: transparent !important;

        font: inherit;
        font-size: 14px;
        color: #18334a;

        padding: 0;
        margin: 0;
    }

    .concept3-search input::placeholder {
        color: #8494a3;
        opacity: 1;
    }

    .concept3-search-arrow {
        border: none !important;
        outline: none !important;
        background: transparent !important;

        padding: 0;
        margin: 0;

        cursor: pointer;
        font: inherit;
    }
}






/* =====================================================
   HOME MOBILE — CATEGORY BUTTONS POLISH
===================================================== */

@media (max-width: 720px) {

    .concept3-categories {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;

        margin-top: 12px;
        width: 100%;
    }

    .concept3-categories a {
        height: 42px;

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

        padding: 0;

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

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

        color: #ffffff;
        font-size: 12px;
        font-weight: 600;

        text-decoration: none;
        white-space: nowrap;
    }

    .concept3-categories a.active {
        background: #102c43;
        border-color: #102c43;
        color: #ffffff;
    }
}


/* =====================================================
   FAVORITE — ACTIVE RED HEART
===================================================== */

.car-favorite-btn.active {
    color: #ff3b30 !important;
    background: #ffffff !important;
    border-color: #ffffff !important;
}

.car-favorite-btn.active:hover {
    color: #ff3b30 !important;
}

.car-favorite-btn.active::before,
.car-favorite-btn.active::after {
    color: #ff3b30 !important;
}





















@media (max-width: 720px) {

    .cars-section-header {
        margin-bottom: 16px !important;
        align-items: center !important;
    }

    .cars-section-header h2 {
        font-size: 22px !important;
        line-height: 1.15 !important;
        font-weight: 750 !important;
        letter-spacing: -0.5px !important;
    }

    .cars-view-all {
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }
}












/* =========================================================
   BBA CARS — BLOG DETAIL MOBILE FINAL PREMIUM
========================================================= */

@media (max-width: 720px) {

    /* =====================================================
       PAGE
    ===================================================== */

    .blog-detail-page {
        background: #f6f8f9 !important;
        padding-bottom: 90px !important;
    }

    .blog-detail-inner,
    .blog-detail-article-inner,
    .blog-detail-next-inner,
    .blog-detail-cta-inner {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }


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

    .blog-detail-hero {
        padding: 28px 0 18px !important;
        background: #f6f8f9 !important;
    }

    .blog-detail-back {
        display: inline-flex !important;
        align-items: center !important;

        margin-bottom: 26px !important;

        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 650 !important;

        color: #657987 !important;
        text-decoration: none !important;
    }


    /* META */

    .blog-detail-meta {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;

        gap: 7px 12px !important;

        margin-bottom: 15px !important;
    }

    .blog-detail-meta span {
        position: relative !important;

        font-size: 9px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;
        letter-spacing: 1px !important;

        color: #80929f !important;
    }

    .blog-detail-meta span:not(:last-child)::after {
        content: "•" !important;

        position: absolute !important;
        right: -9px !important;

        color: #b3bec5 !important;
    }


    /* TITLE */

    .blog-detail-hero h1 {
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 34px !important;
        line-height: 1.06 !important;

        font-weight: 760 !important;
        letter-spacing: -1.25px !important;

        color: #102c43 !important;
    }


    /* LEAD */

    .blog-detail-lead {
        max-width: 100% !important;

        margin: 17px 0 22px !important;

        font-size: 13px !important;
        line-height: 1.65 !important;

        color: #71818c !important;
    }


    /* COVER */

    .blog-detail-cover {
        width: 100% !important;

        margin: 0 !important;

        overflow: hidden !important;

        background: #e9eef1 !important;

        border: 1px solid #e3e9ed !important;
        border-radius: 18px !important;

        box-shadow:
            0 10px 28px rgba(20, 45, 65, 0.055) !important;
    }

    .blog-detail-cover img {
        width: 100% !important;
        height: 245px !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =====================================================
       ARTICLE
    ===================================================== */

    .blog-detail-article {
        padding: 10px 0 0 !important;
        background: #f6f8f9 !important;
    }

    .blog-detail-content {
        width: 100% !important;
        max-width: none !important;
    }


    /* INTRO */

    .blog-detail-intro {
        margin: 0 0 18px !important;
        padding: 18px !important;

        background: #ffffff !important;

        border: 1px solid #e7ecef !important;
        border-radius: 15px !important;

        font-size: 14px !important;
        line-height: 1.7 !important;

        color: #425a6a !important;

        box-shadow:
            0 6px 18px rgba(20, 45, 65, 0.035) !important;
    }


    /* =====================================================
       ARTICLE POINTS 01 — 07
    ===================================================== */

    .blog-detail-point {
        display: grid !important;

        grid-template-columns: 42px minmax(0, 1fr) !important;

        gap: 13px !important;

        margin: 0 0 11px !important;
        padding: 17px 15px !important;

        background: #ffffff !important;

        border: 1px solid #e7ecef !important;
        border-radius: 15px !important;

        box-shadow:
            0 5px 16px rgba(20, 45, 65, 0.03) !important;
    }


    /* NUMBER */

    .blog-detail-number {
        width: 38px !important;
        height: 38px !important;

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

        background: #eef4f7 !important;

        border: 1px solid #e0e8ec !important;
        border-radius: 11px !important;

        font-size: 10px !important;
        line-height: 1 !important;

        font-weight: 800 !important;

        color: #315773 !important;
    }


    /* POINT TITLE */

    .blog-detail-point h2 {
        margin: 1px 0 8px !important;

        font-size: 18px !important;
        line-height: 1.25 !important;

        font-weight: 740 !important;
        letter-spacing: -0.35px !important;

        color: #15354d !important;
    }


    /* POINT TEXT */

    .blog-detail-point p {
        margin: 0 !important;

        font-size: 12.5px !important;
        line-height: 1.65 !important;

        color: #74838e !important;
    }


    /* =====================================================
       NEXT ARTICLE
    ===================================================== */

    .blog-detail-next {
        padding: 26px 0 12px !important;
        background: #f6f8f9 !important;
    }

    .blog-detail-next-label {
        display: block !important;

        margin-bottom: 9px !important;

        font-size: 9px !important;
        line-height: 1.2 !important;

        font-weight: 800 !important;
        letter-spacing: 1px !important;

        color: #8798a4 !important;
    }

    .blog-detail-next-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 14px !important;

        padding: 18px !important;

        background: #ffffff !important;

        border: 1px solid #e5ebee !important;
        border-radius: 16px !important;

        text-decoration: none !important;

        box-shadow:
            0 7px 22px rgba(20, 45, 65, 0.04) !important;
    }

    .blog-detail-next-category {
        display: block !important;

        margin-bottom: 7px !important;

        font-size: 9px !important;
        font-weight: 800 !important;

        letter-spacing: 1px !important;

        color: #7d92a1 !important;
    }

    .blog-detail-next-text h2 {
        margin: 0 !important;

        font-size: 20px !important;
        line-height: 1.25 !important;

        font-weight: 750 !important;
        letter-spacing: -0.45px !important;

        color: #15354d !important;
    }

    .blog-detail-next-arrow {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

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

        background: #f3f6f8 !important;

        border: 1px solid #e3e9ed !important;
        border-radius: 50% !important;

        font-size: 18px !important;

        color: #264d69 !important;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .blog-detail-cta {
        padding: 12px 0 28px !important;
        background: #f6f8f9 !important;
    }

    .blog-detail-cta-inner {
        display: block !important;
    }

    .blog-detail-cta-content,
    .blog-detail-cta-action {
        width: 100% !important;
    }

    .blog-detail-cta-inner {
        padding: 22px 18px !important;

        background:
            linear-gradient(
                145deg,
                #102c43 0%,
                #091c2b 100%
            ) !important;

        border-radius: 18px !important;

        box-shadow:
            0 14px 32px rgba(10, 30, 45, 0.14) !important;
    }

    .blog-detail-cta-label {
        display: block !important;

        margin-bottom: 10px !important;

        font-size: 9px !important;

        font-weight: 800 !important;
        letter-spacing: 1px !important;

        color: #8199aa !important;
    }

    .blog-detail-cta h2 {
        margin: 0 !important;

        font-size: 27px !important;
        line-height: 1.1 !important;

        font-weight: 760 !important;
        letter-spacing: -0.8px !important;

        color: #ffffff !important;
    }

    .blog-detail-cta h2 br {
        display: none !important;
    }

    .blog-detail-cta p {
        margin: 13px 0 18px !important;

        font-size: 12px !important;
        line-height: 1.6 !important;

        color: #b6c3cb !important;
    }


    /* CTA BUTTON */

    .blog-detail-cta-button {
        width: 100% !important;
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 0 15px !important;

        background: #ffffff !important;
        color: #102c43 !important;

        border-radius: 12px !important;

        font-size: 12.5px !important;
        font-weight: 700 !important;

        text-decoration: none !important;
    }

    .blog-detail-cta-button span {
        font-size: 17px !important;
    }

    .blog-detail-cta-phone {
        display: inline-block !important;

        margin-top: 13px !important;

        font-size: 12px !important;
        font-weight: 700 !important;

        color: #d5dde2 !important;

        text-decoration: none !important;
    }


    /* =====================================================
       SAFE BOTTOM SPACING
    ===================================================== */

    .blog-detail-page {
        padding-bottom:
            calc(82px + env(safe-area-inset-bottom)) !important;
    }
}


@media (max-width: 720px) {

    .blog-detail-page {
        padding-bottom: 0 !important;
    }

    .blog-detail-page + .mobile-bottom-nav,
    .mobile-bottom-nav {
        margin-top: 0 !important;
    }

    .site-footer {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body {
        padding-bottom: 72px !important;
    }
}












/* =====================================================
   BBA CARS — CINEMATIC MOBILE HERO
   DESKTOP / IPAD SAFE
===================================================== */


/* DEFAULT:
   Desktop va iPad'da yangi mobile hero ko‘rinmaydi
*/
.home-cinematic-hero {
    display: none;
}


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

@media (max-width: 720px) {

    /* Desktop hero mobil'da ko‘rinmaydi */
    .hero.hero-slider {
        display: none !important;
    }


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

    .home-cinematic-hero {
        position: relative;

        display: block;

        width: calc(100% - 24px);
        min-height: 750px;

        margin: 8px 12px 30px;

        overflow: hidden;

        border-radius: 24px;

        background:
            linear-gradient(
                155deg,
                #061522 0%,
                #0b293e 48%,
                #1c4864 100%
            );

        color: #ffffff;
    }


    /* LIGHT / ATMOSPHERE */

    .home-cinematic-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: 1;

        background:
            radial-gradient(
                circle at 70% 52%,
                rgba(111, 180, 220, 0.23),
                transparent 33%
            ),
            radial-gradient(
                circle at 20% 20%,
                rgba(255,255,255,.06),
                transparent 28%
            ),
            linear-gradient(
                to bottom,
                transparent 55%,
                rgba(2, 12, 20, .30) 100%
            );

        pointer-events: none;
    }


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

    .home-cinematic-content {
        position: relative;
        z-index: 5;

        padding: 30px 20px 0;
    }

    .home-cinematic-label {
        display: block;

        margin-bottom: 15px;

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

        font-weight: 700;

        letter-spacing: 2px;

        color: rgba(255,255,255,.58);
    }

    .home-cinematic-content h1 {
        max-width: 350px;

        margin: 0;

        font-size: 34px;
        line-height: 1.04;

        font-weight: 800;

        letter-spacing: -1.2px;

        color: #ffffff;
    }

    .home-cinematic-content p {
        max-width: 305px;

        margin: 14px 0 19px;

        font-size: 12.5px;
        line-height: 1.55;

        font-weight: 400;

        color: rgba(255,255,255,.72);
    }


    /* =========================================
       CTA BUTTONS
    ========================================= */

    .home-cinematic-actions {
        display: grid;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, .85fr);

        gap: 8px;

        width: 100%;
    }

    .home-cinematic-primary,
    .home-cinematic-secondary {
        min-width: 0;
        min-height: 48px;

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

        border-radius: 14px;

        text-decoration: none;

        font-size: 11px;
        line-height: 1.2;

        font-weight: 700;

        box-sizing: border-box;
    }

    .home-cinematic-primary {
        justify-content: space-between;

        padding: 0 14px;

        background: #ffffff;
        color: #102c43;

        box-shadow:
            0 10px 25px rgba(0,0,0,.14);
    }

    .home-cinematic-primary span:last-child {
        font-size: 18px;
        line-height: 1;
    }

    .home-cinematic-secondary {
        padding: 0 10px;

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

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

        color: #ffffff;

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


    /* =========================================
       CAR
    ========================================= */

    .home-cinematic-car {
        position: absolute;

        z-index: 3;

        top: 300px;
        left: -9%;
        right: -9%;

        height: 300px;

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

        pointer-events: none;
    }

    .home-cinematic-car::before {
        content: "";

        position: absolute;

        width: 85%;
        height: 70%;

        left: 50%;
        top: 48%;

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

        background:
            radial-gradient(
                ellipse,
                rgba(104, 167, 204, .23),
                transparent 66%
            );

        filter: blur(12px);
    }

    .home-cinematic-car::after {
        content: "";

        position: absolute;

        left: 17%;
        right: 17%;
        bottom: 28px;

        height: 28px;

        border-radius: 50%;

        background:
            rgba(0,0,0,.33);

        filter: blur(14px);
    }

    .home-cinematic-car img {
        position: relative;
        z-index: 2;

        width: 110%;
        max-width: none;

        display: block;

        object-fit: contain;

        filter:
            drop-shadow(
                0 20px 25px
                rgba(0,0,0,.24)
            );
    }


    /* =========================================
       GLASS PANEL
    ========================================= */

    .home-cinematic-panel {
        position: absolute;

        z-index: 6;

        left: 13px;
        right: 13px;
        bottom: 13px;

        padding: 11px;

        background:
            rgba(10, 33, 49, .74);

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

        border-radius: 18px;

        box-shadow:
            0 14px 35px
            rgba(0,0,0,.17);

        backdrop-filter:
            blur(18px)
            saturate(135%);

        -webkit-backdrop-filter:
            blur(18px)
            saturate(135%);
    }


    /* =========================================
       SEARCH
    ========================================= */

    .home-cinematic-search {
        width: 100%;
        min-height: 50px;

        display: flex;
        align-items: center;

        gap: 10px;

        padding: 0 13px;

        box-sizing: border-box;

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

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

        border-radius: 13px;
    }

    .home-cinematic-search-icon {
        flex: 0 0 auto;

        font-size: 19px;

        color: #ffffff;
    }

    .home-cinematic-search input {
        flex: 1;

        min-width: 0;

        padding: 0;

        border: none;
        outline: none;

        background: transparent;

        font-family: inherit;
        font-size: 12.5px;

        color: #ffffff;
    }

    .home-cinematic-search input::placeholder {
        color:
            rgba(255,255,255,.58);

        opacity: 1;
    }

    .home-cinematic-search button {
        flex: 0 0 auto;

        padding: 0;

        border: none;
        outline: none;

        background: transparent;

        color: #ffffff;

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

        cursor: pointer;
    }


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

    .home-cinematic-stats {
        display: grid;

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

        margin-top: 12px;
    }

    .home-cinematic-stats > div {
        position: relative;

        min-width: 0;

        padding: 5px 2px;

        text-align: center;
    }

    .home-cinematic-stats
    > div:not(:last-child)::after {

        content: "";

        position: absolute;

        right: 0;
        top: 6px;
        bottom: 6px;

        width: 1px;

        background:
            rgba(255,255,255,.13);
    }

    .home-cinematic-stats strong {
        display: block;

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

        font-weight: 800;

        color: #ffffff;
    }

    .home-cinematic-stats span {
        display: block;

        margin-top: 5px;

        font-size: 7.5px;
        line-height: 1.25;

        color:
            rgba(255,255,255,.56);
    }
}


@media (max-width: 720px) {

    .home-cinematic-hero {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 28px !important;

        border-radius: 0 !important;

        min-height: 760px !important;
    }

    .home-cinematic-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .home-cinematic-panel {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }
}



/* =====================================================
   BBA CARS — HOME MOBILE CINEMATIC FINAL V2
===================================================== */

@media (max-width: 720px) {

    /* =========================================
       HEADER — HERO ICHIGA KIRADI
    ========================================= */

    .home-page .site-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 100 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .home-page .header-container {
        height: 82px !important;

        padding: 0 20px !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .home-page .site-logo {
        position: relative !important;

        color: #ffffff !important;

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

        letter-spacing: .3px !important;
    }

    .home-page .site-logo::after {
        content: "PREMIUM COLLECTION";

        position: absolute;

        left: 0;
        top: calc(100% + 3px);

        white-space: nowrap;

        font-size: 6px;
        font-weight: 500;

        letter-spacing: 2px;

        color: rgba(255,255,255,.56);
    }

    .home-page .mobile-menu-btn,
    .home-page .mobile-header-search-btn,
    .home-page .mobile-favorite-btn,
    .home-page .mobile-header-phone-btn {
        color: #ffffff !important;
        background: transparent !important;
        border: none !important;
    }

    .home-page .mobile-menu-btn svg,
    .home-page .mobile-header-actions svg {
        stroke: #ffffff !important;
    }


    /* =========================================
       HERO FULL SCREEN WIDTH
    ========================================= */

    .home-page .home-cinematic-hero {
        width: 100% !important;
        max-width: none !important;

        min-height: 790px !important;

        margin: 0 0 24px !important;

        border-radius: 0 !important;

        background:
            linear-gradient(
                150deg,
                #06131e 0%,
                #09273a 47%,
                #183d55 100%
            ) !important;
    }


    /* HEADER UCHUN JOY */

    .home-page .home-cinematic-content {
        padding:
            112px
            20px
            0 !important;
    }


    /* =========================================
       LABEL
    ========================================= */

    .home-page .home-cinematic-label {
        margin-bottom: 18px !important;

        font-size: 7.5px !important;

        letter-spacing: 2.8px !important;

        color: rgba(255,255,255,.58) !important;
    }


    /* =========================================
       TITLE — REFERENCEGA YAQIN
    ========================================= */

    .home-page .home-cinematic-content h1 {
        max-width: 370px !important;

        font-size: 30px !important;
        line-height: 1.08 !important;

        letter-spacing: -1px !important;

        font-weight: 800 !important;

        color: #ffffff !important;
    }


    /* DESCRIPTION */

    .home-page .home-cinematic-content p {
        max-width: 285px !important;

        margin:
            15px
            0
            19px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        color: rgba(255,255,255,.72) !important;
    }


    /* =========================================
       BUTTONS
    ========================================= */

    .home-page .home-cinematic-actions {
        grid-template-columns:
            1.12fr
            .88fr !important;

        gap: 9px !important;
    }

    .home-page .home-cinematic-primary,
    .home-page .home-cinematic-secondary {
        min-height: 46px !important;

        border-radius: 23px !important;

        font-size: 10.5px !important;
    }

    .home-page .home-cinematic-primary {
        padding: 0 16px !important;
    }


    /* =========================================
       CAR — SAL PASTROQ, TO‘LIQROQ
    ========================================= */

    .home-page .home-cinematic-car {
        top: 350px !important;

        left: -4% !important;
        right: -4% !important;

        height: 285px !important;
    }

    .home-page .home-cinematic-car img {
        width: 104% !important;

        max-width: none !important;

        object-fit: contain !important;

        transform: translateY(4px) !important;
    }


    /* =========================================
       GLASS PANEL
    ========================================= */

    .home-page .home-cinematic-panel {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;

        padding: 11px !important;

        border-radius: 18px !important;

        background:
            rgba(8, 29, 44, .80) !important;

        border:
            1px solid
            rgba(255,255,255,.13) !important;
    }


    /* SEARCH */

    .home-page .home-cinematic-search {
        min-height: 48px !important;

        border-radius: 14px !important;
    }


    /* STATS */

    .home-page .home-cinematic-stats {
        margin-top: 12px !important;
    }

    .home-page .home-cinematic-stats strong {
        font-size: 16px !important;
    }

    .home-page .home-cinematic-stats span {
        font-size: 7px !important;
    }
}



/* =====================================================
   HOME — CINEMATIC MOBILE HEADER
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-header {
        background: #071d2d !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    body.home-page .header-container {
        height: 76px !important;
        padding: 0 20px !important;
        background: transparent !important;
    }

    body.home-page .site-logo {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 800 !important;
        letter-spacing: 1px !important;
    }

    body.home-page .mobile-menu-btn,
    body.home-page .mobile-header-search-btn,
    body.home-page .mobile-favorite-btn,
    body.home-page .mobile-header-phone-btn {
        color: #ffffff !important;
    }

    body.home-page .mobile-menu-btn svg,
    body.home-page .mobile-header-search-btn svg,
    body.home-page .mobile-favorite-btn svg,
    body.home-page .mobile-header-phone-btn svg {
        stroke: #ffffff !important;
    }

    body.home-page .site-header + main,
    body.home-page #app {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}



/* =====================================================
   HOME MOBILE — CINEMATIC HERO BACKGROUND
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-bg {
        position: absolute !important;
        inset: 0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(3, 15, 25, 0.20) 0%,
                rgba(3, 15, 25, 0.05) 45%,
                rgba(3, 15, 25, 0.42) 100%
            ),
            url("./images/hero-bg-mobile.png")
            center center / cover no-repeat !important;
    }

}





/* =====================================================
   HOME MOBILE — HERO HEIGHT FIX
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-hero {
        min-height: 780px !important;
        height: 780px !important;
    }

    body.home-page .home-cinematic-panel {
        bottom: 18px !important;
    }
}

/* =====================================================
   HOME MOBILE — CAR / PANEL POSITION
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-bg {
        background-position: center 58% !important;
    }

    body.home-page .home-cinematic-panel {
        bottom: 16px !important;
    }
}

/* =====================================================
   HOME MOBILE — HERO TYPOGRAPHY POLISH
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-content {
        top: 118px !important;
        left: 24px !important;
        right: 24px !important;
    }

    body.home-page .home-cinematic-label {
        font-size: 9px !important;
        letter-spacing: 2.2px !important;
        margin-bottom: 18px !important;
    }

    body.home-page .home-cinematic-content h1 {
        font-size: 31px !important;
        line-height: 1.05 !important;
        letter-spacing: -1.2px !important;
        margin: 0 0 16px !important;
    }

    body.home-page .home-cinematic-content p {
        max-width: 310px !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin-bottom: 20px !important;
    }
}

/* =====================================================
   HOME MOBILE — HERO CONTENT POSITION FIX
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-content {
        top: 72px !important;
        left: 24px !important;
        right: 24px !important;
    }

}




/* =====================================================
   HOME MOBILE — CONCEPT FINAL
   HEADER + HERO = ONE BLOCK
===================================================== */

@media (max-width: 720px) {

    body.home-page {
        padding-top: 0 !important;
        background: #f5f5f5;
    }

    /* =========================
       HEADER HERO ICHIDA
    ========================= */

    body.home-page .site-header {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        height: 76px !important;

        z-index: 100 !important;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.home-page .header-container {
        width: 100% !important;
        height: 76px !important;

        padding: 0 22px !important;

        background: transparent !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body.home-page .site-logo {
        position: absolute !important;
        left: 72px !important;
        top: 25px !important;

        transform: none !important;

        color: #fff !important;

        font-size: 17px !important;
        font-weight: 800 !important;
        letter-spacing: .8px !important;
    }

    body.home-page .site-logo::after {
        content: "PREMIUM COLLECTION";

        display: block;

        margin-top: 2px;

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

        font-weight: 500;
        letter-spacing: 2px;

        color: rgba(255,255,255,.58);
    }

    body.home-page .mobile-menu-btn {
        position: relative !important;
        z-index: 3 !important;

        margin: 0 !important;

        color: #fff !important;
    }

    body.home-page .mobile-header-actions {
        margin-left: auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 17px !important;
    }

    body.home-page .mobile-header-search-btn,
    body.home-page .mobile-favorite-btn,
    body.home-page .mobile-header-phone-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 26px !important;
        height: 26px !important;

        padding: 0 !important;
        margin: 0 !important;

        color: #fff !important;
        background: transparent !important;
        border: none !important;
    }

    body.home-page .mobile-menu-btn svg,
    body.home-page .mobile-header-search-btn svg,
    body.home-page .mobile-favorite-btn svg,
    body.home-page .mobile-header-phone-btn svg {
        stroke: #fff !important;
    }


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

    body.home-page .home-cinematic-hero {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: 790px !important;
        min-height: 790px !important;

        margin: 0 !important;

        overflow: hidden !important;

        border-radius: 0 0 24px 24px !important;

        background: #071926 !important;

        color: #fff !important;
    }


    /* BACKGROUND */

    body.home-page .home-cinematic-bg {
        position: absolute !important;
        inset: 0 !important;

        z-index: 0 !important;

        background:
            linear-gradient(
                180deg,
                rgba(3,14,24,.38) 0%,
                rgba(3,14,24,.12) 45%,
                rgba(3,14,24,.38) 100%
            ),
            url("./images/hero-bg-mobile.png")
            center center / cover no-repeat !important;
    }


    /* HERO CONTENT */

    body.home-page .home-cinematic-content {
        position: relative !important;

        z-index: 5 !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        padding: 138px 24px 0 !important;
    }

    body.home-page .home-cinematic-label {
        display: block !important;

        margin-bottom: 16px !important;

        font-size: 8px !important;
        font-weight: 600 !important;

        letter-spacing: 3px !important;

        color: rgba(255,255,255,.68) !important;
    }

    body.home-page .home-cinematic-content h1 {
        max-width: 360px !important;

        margin: 0 !important;

        font-size: 30px !important;
        line-height: 1.06 !important;

        font-weight: 800 !important;

        letter-spacing: -1px !important;

        color: #fff !important;
    }

    body.home-page .home-cinematic-content p {
        max-width: 290px !important;

        margin: 18px 0 19px !important;

        font-size: 12px !important;
        line-height: 1.55 !important;

        color: rgba(255,255,255,.80) !important;
    }


    /* BUTTONS */

    body.home-page .home-cinematic-actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1.08fr .92fr !important;

        gap: 10px !important;
    }

    body.home-page .home-cinematic-primary,
    body.home-page .home-cinematic-secondary {
        height: 47px !important;
        min-height: 47px !important;

        border-radius: 24px !important;

        font-size: 11px !important;
        font-weight: 600 !important;
    }

    body.home-page .home-cinematic-primary {
        padding: 0 16px !important;

        background: #fff !important;
        color: #102536 !important;
    }

    body.home-page .home-cinematic-secondary {
        border: 1px solid rgba(255,255,255,.72) !important;

        background: rgba(8,25,37,.18) !important;

        color: #fff !important;

        backdrop-filter: blur(8px);
    }


    /* =========================
       BOTTOM GLASS PANEL
    ========================= */

    body.home-page .home-cinematic-panel {
        position: absolute !important;

        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;

        z-index: 5 !important;

        padding: 11px 11px 13px !important;

        border-radius: 18px !important;

        background: rgba(9,31,45,.82) !important;

        border: 1px solid rgba(255,255,255,.14) !important;

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

    body.home-page .home-cinematic-search {
        height: 48px !important;
        min-height: 48px !important;

        border-radius: 14px !important;

        background: rgba(255,255,255,.08) !important;
    }

    body.home-page .home-cinematic-stats {
        margin-top: 13px !important;
    }

    body.home-page .home-cinematic-stats strong {
        font-size: 17px !important;
    }

    body.home-page .home-cinematic-stats span {
        font-size: 7px !important;
    }


    /* MAIN STARTS DIRECTLY UNDER HERO */

    body.home-page #app {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

}

/* =====================================================
   HOME MOBILE — CONTENT UP
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-cinematic-content {
        transform: translateY(-24px) !important;
    }

}


/* =====================================================
   HOME MOBILE — STICKY / FIXED HEADER
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        z-index: 9999 !important;

        background: rgba(7, 25, 38, 0.82) !important;

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

        border-bottom: 1px solid rgba(255,255,255,.08) !important;
    }

}

/* =====================================================
   MOBILE HEADER — FULL WIDTH
===================================================== */

@media (max-width: 720px) {

    .site-header {
        width: 100% !important;
        max-width: none !important;

        left: 0 !important;
        right: 0 !important;
        top: 0 !important;

        margin: 0 !important;

        border-radius: 0 !important;
    }

    .site-header .header-inner {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        border-radius: 0 !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }

}







/* =====================================================
   BBA CARS — MOBILE FOOTER FINAL
   CONCEPT MATCH
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-footer {
        width: 100% !important;
        margin: 0 !important;

        padding:
            30px 20px
            calc(88px + env(safe-area-inset-bottom))
            !important;

        background: #f7f8fa !important;

        border: none !important;
        border-top: 1px solid #eceff1 !important;

        color: #111111 !important;
    }


    body.home-page .site-footer-container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =================================================
       MAIN — 3 USTUN
       BBA CARS | SAHIFALAR | MA'LUMOT
    ================================================= */

    body.home-page .site-footer-main {
        display: grid !important;

        grid-template-columns:
            1.25fr
            0.9fr
            0.9fr !important;

        column-gap: 22px !important;

        align-items: start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* site-footer-links ichidagi ikki column
       main grid'ning bevosita ustunlariga aylanadi */

    body.home-page .site-footer-links {
        display: contents !important;
    }


    /* =================================================
       BRAND
    ================================================= */

    body.home-page .site-footer-brand {
        display: block !important;

        grid-column: 1 !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
    }


    body.home-page .footer-logo {
        display: block !important;

        margin: 0 0 9px !important;
        padding: 0 !important;

        font-size: 18px !important;
        line-height: 1 !important;

        font-weight: 800 !important;
        letter-spacing: -0.4px !important;

        color: #111111 !important;

        text-decoration: none !important;
    }


    body.home-page .site-footer-brand p {
        max-width: 135px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 8.5px !important;
        line-height: 1.55 !important;

        color: #737b82 !important;
    }


    /* =================================================
       SOCIAL ICONS
    ================================================= */

    body.home-page .footer-socials {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 15px !important;

        margin: 16px 0 0 !important;
        padding: 0 !important;
    }


    body.home-page .footer-socials a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #485760 !important;
    }


    body.home-page .footer-socials svg {
        width: 17px !important;
        height: 17px !important;
    }


    /* Telegram */

    body.home-page .footer-socials a:first-child svg path {
        fill: #485760 !important;
        stroke: none !important;
    }


    /* Instagram */

    body.home-page .footer-socials a:nth-child(2) svg {
        fill: none !important;
        stroke: #485760 !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    body.home-page .footer-socials a:nth-child(2) svg rect,
    body.home-page .footer-socials a:nth-child(2) svg circle {
        fill: none !important;
        stroke: #485760 !important;
    }


    /* =================================================
       LINK COLUMNS
    ================================================= */

    body.home-page .footer-column {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body.home-page .footer-column:first-child {
        grid-column: 2 !important;
    }


    body.home-page .footer-column:last-child {
        grid-column: 3 !important;
    }


    body.home-page .footer-column h3 {
        margin: 0 0 12px !important;
        padding: 0 !important;

        font-size: 8px !important;
        line-height: 1 !important;

        font-weight: 800 !important;

        letter-spacing: 0.4px !important;
        text-transform: none !important;

        color: #151515 !important;
    }


    body.home-page .footer-column a {
        display: block !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 8.5px !important;
        line-height: 1.2 !important;

        font-weight: 500 !important;

        color: #525960 !important;

        text-decoration: none !important;
    }


    /* =================================================
       COPYRIGHT
    ================================================= */

    body.home-page .site-footer-bottom {
        display: block !important;

        width: 100% !important;

        margin: 26px 0 0 !important;
        padding: 16px 0 0 !important;

        border: none !important;
        border-top: 1px solid #e6e9eb !important;

        background: transparent !important;

        text-align: center !important;
    }


    body.home-page .site-footer-bottom p,
    body.home-page .site-footer-bottom span {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 7.5px !important;
        line-height: 1.55 !important;

        color: #8e959a !important;
    }

}

/* =====================================================
   HOME MOBILE — FOOTER HEIGHT / SPACING FIX
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-footer {
        padding-top: 24px !important;
        padding-bottom:
            calc(70px + env(safe-area-inset-bottom))
            !important;
    }

    body.home-page .site-footer-main {
        min-height: 0 !important;
    }

    body.home-page .site-footer-bottom {
        margin-top: 18px !important;
        padding-top: 12px !important;
    }

    body.home-page .site-footer-container {
        min-height: 0 !important;
    }

}

/* =====================================================
   HOME MOBILE — FOOTER CONTENT LOWER
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-footer {
        padding-top: 54px !important;
    }

}



/* =====================================================
   HOME MOBILE — BRANDS TO FOOTER GAP FIX
===================================================== */

@media (max-width: 720px) {

    body.home-page .home-brands {
        margin-bottom: 0 !important;
        padding-bottom: 18px !important;
    }

    body.home-page .site-footer {
        margin-top: 0 !important;
    }

}

/* =====================================================
   HOME MOBILE — FOOTER BOTTOM GAP FIX
===================================================== */

@media (max-width: 720px) {

    body.home-page .site-footer {
        padding-bottom: 14px !important;
    }

    body.home-page .site-footer-bottom {
        margin-bottom: 0 !important;
    }

}











/* =====================================================
   ALL OTHER PAGES — MOBILE FOOTER
   INDEX FOOTERGA TEGMAYDI
===================================================== */

@media (max-width: 720px) {

    body:not(.home-page) .site-footer {
        width: 100% !important;
        margin: 0 !important;

        padding: 32px 20px 14px !important;

        background: #f7f8fa !important;
        color: #111111 !important;

        border: none !important;
        border-top: 1px solid #eceff1 !important;
    }

    body:not(.home-page) .site-footer-container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;
    }

    body:not(.home-page) .site-footer-main {
        display: grid !important;

        grid-template-columns:
            1.25fr
            0.9fr
            0.9fr !important;

        column-gap: 22px !important;

        align-items: start !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        min-height: 0 !important;
    }

    body:not(.home-page) .site-footer-links {
        display: contents !important;
    }

    /* BRAND */

    body:not(.home-page) .site-footer-brand {
        display: block !important;
        grid-column: 1 !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: none !important;
    }

    body:not(.home-page) .footer-logo {
        display: block !important;

        margin: 0 0 9px !important;
        padding: 0 !important;

        font-size: 18px !important;
        line-height: 1 !important;

        font-weight: 800 !important;
        letter-spacing: -0.4px !important;

        color: #111111 !important;
        text-decoration: none !important;
    }

    body:not(.home-page) .site-footer-brand p {
        max-width: 135px !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 8.5px !important;
        line-height: 1.55 !important;

        color: #737b82 !important;
    }

    /* SOCIAL */

    body:not(.home-page) .footer-socials {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 15px !important;

        margin: 16px 0 0 !important;
        padding: 0 !important;
    }

    body:not(.home-page) .footer-socials a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 22px !important;
        height: 22px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: none !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        color: #485760 !important;
    }

    body:not(.home-page) .footer-socials svg {
        width: 17px !important;
        height: 17px !important;
    }

    body:not(.home-page)
    .footer-socials a:first-child svg path {
        fill: #485760 !important;
        stroke: none !important;
    }

    body:not(.home-page)
    .footer-socials a:nth-child(2) svg {
        fill: none !important;
        stroke: #485760 !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    body:not(.home-page)
    .footer-socials a:nth-child(2) svg rect,
    body:not(.home-page)
    .footer-socials a:nth-child(2) svg circle {
        fill: none !important;
        stroke: #485760 !important;
    }

    /* COLUMNS */

    body:not(.home-page) .footer-column {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body:not(.home-page)
    .footer-column:first-child {
        grid-column: 2 !important;
    }

    body:not(.home-page)
    .footer-column:last-child {
        grid-column: 3 !important;
    }

    body:not(.home-page)
    .footer-column h3 {
        margin: 0 0 12px !important;
        padding: 0 !important;

        font-size: 8px !important;
        line-height: 1 !important;

        font-weight: 800 !important;
        letter-spacing: 0.4px !important;

        text-transform: none !important;

        color: #151515 !important;
    }

    body:not(.home-page)
    .footer-column a {
        display: block !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        font-size: 8.5px !important;
        line-height: 1.2 !important;

        font-weight: 500 !important;

        color: #525960 !important;

        text-decoration: none !important;
    }

    /* COPYRIGHT */

    body:not(.home-page)
    .site-footer-bottom {
        display: block !important;

        width: 100% !important;

        margin: 18px 0 0 !important;
        padding: 12px 0 0 !important;

        border: none !important;
        border-top: 1px solid #e6e9eb !important;

        background: transparent !important;

        text-align: center !important;
    }

    body:not(.home-page)
    .site-footer-bottom p,
    body:not(.home-page)
    .site-footer-bottom span {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 7.5px !important;
        line-height: 1.55 !important;

        color: #8e959a !important;
    }

}


/* =====================================================
   MOBILE — HIDE FOOTER ON CONTACT + COMPARE ONLY
===================================================== */

@media (max-width: 720px) {

    body.contact-page .site-footer,
    body.compare-page .site-footer {
        display: none !important;
    }

}



















/* =====================================================
   CARS DESKTOP — HIDE MOBILE FILTER UI
===================================================== */

@media (min-width: 721px) {

    .mobile-filter-overlay,
    .mobile-filter-sheet,
    .mobile-cars-head {
        display: none !important;
    }

}


/* =====================================================
   CARS DESKTOP — LAYOUT SPACING FIX
===================================================== */

@media (min-width: 1181px) {

    body.cars-page .catalog-hero {
        padding-top: 54px !important;
        padding-bottom: 18px !important;
    }

    body.cars-page .catalog-filter-section {
        padding-top: 18px !important;
        padding-bottom: 8px !important;
    }

    body.cars-page .cars-section {
        padding-top: 24px !important;
        padding-bottom: 60px !important;
    }

    body.cars-page .cars-section-inner {
        width: calc(100% - 140px) !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }

    body.cars-page .cars-container {
        align-items: stretch !important;
    }

}



/* =====================================================
   BBA CARS — GLOBAL DESKTOP FOOTER FINAL
===================================================== */

@media (min-width: 721px) {

    .site-footer {
        width: 100%;
        margin: 0;
        padding: 64px 70px 28px;

        background: #101114;
        color: #ffffff;

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

    .site-footer-container {
        width: 100%;
        max-width: 1500px;

        margin: 0 auto;
        padding: 0;
    }

    .site-footer-main {
        display: grid;
        grid-template-columns: 1.1fr 1fr;

        gap: 100px;
        align-items: start;

        padding-bottom: 52px;
    }

    /* =========================
       BRAND
    ========================= */

    .site-footer-brand {
        max-width: 360px;
        margin: 0;
        padding: 0;
    }

    .footer-logo {
        display: inline-block;

        margin-bottom: 20px;

        color: #ffffff;

        font-size: 23px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -0.5px;

        text-decoration: none;
    }

    .site-footer-brand p {
        max-width: 320px;

        margin: 0;

        color: #8f949b;

        font-size: 13px;
        line-height: 1.7;
    }

    /* =========================
       SOCIALS
    ========================= */

    .footer-socials {
        display: flex;
        align-items: center;

        gap: 12px;

        margin-top: 24px;
    }

    .footer-socials a {
        width: 36px;
        height: 36px;

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

        border: 1px solid rgba(255,255,255,.12);
        border-radius: 9px;

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

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

    .footer-socials a:hover {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.22);
    }

    .footer-socials svg {
        width: 16px;
        height: 16px;
    }

    .footer-socials a:first-child svg path {
        fill: #ffffff;
        stroke: none;
    }

    .footer-socials a:nth-child(2) svg {
        fill: none;
        stroke: #ffffff;
        stroke-width: 1.7;
    }

    /* =========================
       LINKS
    ========================= */

    .site-footer-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(150px, 1fr));

        gap: 60px;
    }

    .footer-column {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        margin: 0;
        padding: 0;
    }

    .footer-column h3 {
        margin: 0 0 20px;

        color: #70757d;

        font-size: 11px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .footer-column a {
        margin: 0 0 13px;

        color: #d3d6da;

        font-size: 13px;
        line-height: 1.35;
        font-weight: 400;

        text-decoration: none;

        transition: color .2s ease;
    }

    .footer-column a:hover {
        color: #ffffff;
    }

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

    .site-footer-bottom {
        width: 100%;

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

        gap: 30px;

        margin: 0;
        padding-top: 22px;

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

    .site-footer-bottom p,
    .site-footer-bottom span {
        margin: 0;

        color: #676c73;

        font-size: 11px;
        line-height: 1.4;
    }

}






/* =====================================================
   DESKTOP — HIDE MOBILE ONLY ELEMENTS
===================================================== */

@media (min-width: 721px) {

    .mobile-bottom-nav,
    .mobile-menu-overlay,
    .mobile-menu-drawer,
    .mobile-filter-overlay,
    .mobile-filter-sheet,
    .mobile-cars-head {
        display: none !important;
    }

}



/* DESKTOP HEADER — FAVORITES SIZE FIX */

@media (min-width: 1181px) {

    .header-favorites {
        font-size: 13px !important;
        font-weight: 600 !important;
        gap: 7px !important;
    }

    .header-favorites span {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .header-favorites svg {
        width: 18px !important;
        height: 18px !important;
    }

}

/* DESKTOP — HIDE MOBILE HERO SEARCH */

@media (min-width: 721px) {

    .mobile-hero-search {
        display: none !important;
    }

}













/* =====================================================
   KUTILAYOTGAN AVTOMOBILLAR — NEW MOBILE HERO
===================================================== */

@media (max-width: 720px) {

  /* ===== HEADER → HERO ORASINI 0 QILAMIZ ===== */

  body.cars-page {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.cars-page .site-header {
    margin-bottom: 0 !important;
  }

  body.cars-page #app {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }


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

  body.cars-page .expected-hero {
    position: relative !important;

    width: 100% !important;
    height: 560px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #eef1f3 !important;
  }


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

  body.cars-page .expected-hero-bg {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1 !important;
  }

  body.cars-page .expected-hero-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;
  }


  /* ===== MATN O'QILISHI UCHUN YENGIL GRADIENT ===== */

  body.cars-page .expected-hero-overlay {
    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.91) 23%,
        rgba(255,255,255,.63) 39%,
        rgba(255,255,255,.10) 62%,
        rgba(255,255,255,0) 100%
      ) !important;
  }


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

  body.cars-page .expected-hero-content {
    position: relative !important;
    z-index: 5 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 38px 20px 0 !important;
  }


  /* SOON IN BBA CARS */

  body.cars-page .expected-hero-eyebrow {
    display: block !important;

    margin: 0 0 10px !important;

    color: #33495b !important;

    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    letter-spacing: 2px !important;
  }


  /* TITLE */

  body.cars-page .expected-hero-content h1 {
    margin: 0 !important;

    color: #080c10 !important;

    font-size: 35px !important;
    line-height: .98 !important;

    font-weight: 800 !important;
    letter-spacing: -1.6px !important;
  }


  /* DESCRIPTION */

  body.cars-page .expected-hero-content p {
    max-width: 355px !important;

    margin: 15px 0 0 !important;

    color: #52616d !important;

    font-size: 12.5px !important;
    line-height: 1.45 !important;

    font-weight: 400 !important;
  }


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

  body.cars-page .expected-hero-notify {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 9px !important;

    width: 100% !important;
    height: 50px !important;

    box-sizing: border-box !important;

    margin: 19px 0 0 !important;
    padding: 0 15px !important;

    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;

    background:
      linear-gradient(
        135deg,
        #071827 0%,
        #06121d 100%
      ) !important;

    color: #fff !important;

    box-shadow:
      0 12px 28px rgba(5,20,32,.18),
      inset 0 1px 0 rgba(255,255,255,.08) !important;

    font-size: 11.5px !important;
    font-weight: 650 !important;
  }


  /* PREMIUM BELL ICON */

  body.cars-page .expected-hero-notify svg {
    width: 17px !important;
    height: 17px !important;

    flex: 0 0 17px !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* ARROW */

  body.cars-page .expected-hero-arrow {
    margin-left: auto !important;

    font-size: 18px !important;
    line-height: 1 !important;

    font-weight: 400 !important;

    opacity: .9 !important;
  }


  /* =============================================
     TEZ ORADA — PREMIUM FLOATING BADGE
  ============================================= */

  body.cars-page .expected-hero-badge {
    position: absolute !important;

    right: 17px !important;
    bottom: 27px !important;

    z-index: 6 !important;

    display: flex !important;

    align-items: center !important;
    gap: 10px !important;

    min-width: 166px !important;

    box-sizing: border-box !important;

    padding: 11px 13px !important;

    border:
      1px solid rgba(255,255,255,.82) !important;

    border-radius: 13px !important;

    background:
      rgba(255,255,255,.91) !important;

    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;

    box-shadow:
      0 12px 32px rgba(17,31,43,.14),
      inset 0 1px 0 rgba(255,255,255,.85) !important;
  }


  /* CALENDAR ICON CONTAINER */

  body.cars-page .expected-hero-badge-icon {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    flex: 0 0 34px !important;

    border-radius: 9px !important;

    background: #f1f5f8 !important;

    color: #071b2c !important;

    box-shadow:
      inset 0 0 0 1px rgba(8,28,44,.05) !important;
  }


  /* CALENDAR SVG */

  body.cars-page .expected-hero-badge-icon svg {
    width: 17px !important;
    height: 17px !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* BADGE TITLE */

  body.cars-page .expected-hero-badge strong {
    display: block !important;

    margin: 0 0 3px !important;

    color: #0a1117 !important;

    font-size: 11px !important;
    line-height: 1.1 !important;

    font-weight: 700 !important;
  }


  /* BADGE SUBTITLE */

  body.cars-page .expected-hero-badge > div:last-child > span {
    display: block !important;

    color: #78848d !important;

    font-size: 8.5px !important;
    line-height: 1.2 !important;

    font-weight: 400 !important;

    white-space: nowrap !important;
  }

}


@media (max-width: 720px) {

  /* Hero pastga biroz uzunroq */
  body.cars-page .expected-hero {
    height: 680px !important;
  }

  /* Tepada yozuvlar biroz pastroqqa */
  body.cars-page .expected-hero-content {
    padding-top: 100px !important;
  }

}



@media (max-width: 720px) {

  /* ===== TEZ ORADA — PREMIUM LARGE BADGE ===== */

  body.cars-page .expected-hero-badge {
    right: 18px !important;
    bottom: 30px !important;

    min-width: 190px !important;
    min-height: 72px !important;

    padding: 12px 15px !important;

    gap: 12px !important;

    border-radius: 16px !important;

    border: 1px solid rgba(255, 255, 255, 0.9) !important;

    background: rgba(255, 255, 255, 0.92) !important;

    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;

    box-shadow:
      0 16px 35px rgba(15, 30, 45, 0.14),
      0 3px 10px rgba(15, 30, 45, 0.06),
      inset 0 1px 0 rgba(255,255,255,1) !important;
  }


  /* Calendar premium container */

  body.cars-page .expected-hero-badge-icon {
    width: 42px !important;
    height: 42px !important;

    flex: 0 0 42px !important;

    border-radius: 12px !important;

    color: #071b2c !important;

    background:
      linear-gradient(
        145deg,
        #f7f9fb,
        #edf2f6
      ) !important;

    box-shadow:
      inset 0 0 0 1px rgba(7, 27, 44, 0.06),
      0 4px 10px rgba(7, 27, 44, 0.06) !important;
  }


  /* Calendar */

  body.cars-page .expected-hero-badge-icon svg {
    width: 20px !important;
    height: 20px !important;

    stroke-width: 1.8 !important;
  }


  /* Tez orada */

  body.cars-page .expected-hero-badge strong {
    margin-bottom: 5px !important;

    font-size: 13px !important;
    line-height: 1.05 !important;

    font-weight: 750 !important;

    letter-spacing: -0.15px !important;

    color: #09131b !important;
  }


  /* Siz kutgan avtomobillar */

  body.cars-page .expected-hero-badge > div:last-child > span {
    font-size: 9.5px !important;
    line-height: 1.2 !important;

    font-weight: 450 !important;

    color: #75818a !important;
  }

}

@media (max-width: 720px) {

  body.cars-page .expected-hero-badge {
    right: 25px !important;
    bottom: 120px !important;
  }

}



/* =====================================================
   EXPECTED CARS — MOBILE BENEFITS
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-benefits {
    width: 100%;
    box-sizing: border-box;

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

    margin: 0;
    padding: 18px 12px 20px;

    background: #ffffff;

    border-radius: 0 0 22px 22px;

    box-shadow:
      0 10px 30px rgba(18, 32, 44, 0.04);
  }


  /* HAR BIR ITEM */

  body.cars-page .expected-benefit-item {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
  }


  /* PREMIUM ICON CIRCLE */

  body.cars-page .expected-benefit-icon {
    width: 42px;
    height: 42px;

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

    margin-bottom: 8px;

    border-radius: 50%;

    color: #071827;

    background:
      linear-gradient(
        145deg,
        #f8fafc 0%,
        #edf2f6 100%
      );

    border: 1px solid rgba(8, 28, 44, 0.05);

    box-shadow:
      0 5px 14px rgba(12, 30, 45, 0.05),
      inset 0 1px 0 rgba(255,255,255,.95);
  }


  /* SVG ICON */

  body.cars-page .expected-benefit-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* TEXT */

  body.cars-page .expected-benefit-item > span {
    display: block;

    color: #15212b;

    font-size: 9.5px;
    line-height: 1.25;

    font-weight: 550;

    letter-spacing: -0.1px;
  }

}


@media (max-width: 720px) {

  body.cars-page .expected-benefits {
    position: relative;
    z-index: 10;

    margin-top: -18px !important;

    border-radius: 22px 22px 0 0 !important;

    padding-top: 22px !important;
    padding-bottom: 20px !important;

    background: #ffffff !important;

    box-shadow:
      0 -8px 25px rgba(15, 30, 45, 0.04) !important;
  }

}





/* =====================================================
   EXPECTED CARS — MOBILE CATALOG HEADER
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-catalog {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 28px 16px 30px;

    background: #f8f9fa;
  }

  body.cars-page .expected-catalog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 0 18px;
  }

  body.cars-page .expected-catalog-header h2 {
    margin: 0;

    color: #0a0e12;

    font-size: 19px;
    line-height: 1.1;
    font-weight: 750;

    letter-spacing: -0.55px;
  }

  body.cars-page .expected-view-all {
    flex: 0 0 auto;

    height: 36px;

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

    gap: 7px;

    padding: 0 12px;

    border: 1px solid rgba(10, 25, 38, 0.06);
    border-radius: 11px;

    background: #ffffff;

    color: #53616c;

    font-size: 9.5px;
    font-weight: 500;

    box-shadow:
      0 4px 14px rgba(15, 30, 45, 0.035),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  body.cars-page .expected-view-all-arrow {
    color: #142633;

    font-size: 14px;
    line-height: 1;
  }

}













/* =====================================================
   EXPECTED CARS — MOBILE CARDS
===================================================== */

@media (max-width: 720px) {

  /* 2 USTUN */

  body.cars-page .expected-cars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;
    margin: 0;
    padding: 0;
  }


  /* CARD */

  body.cars-page .expected-car-card {
    min-width: 0;
    overflow: hidden;

    border: 1px solid rgba(12, 29, 42, 0.06);
    border-radius: 15px;

    background: #ffffff;

    box-shadow:
      0 8px 24px rgba(12, 28, 40, 0.055),
      inset 0 1px 0 rgba(255,255,255,.9);
  }


  /* IMAGE AREA */

  body.cars-page .expected-car-image-wrap {
    position: relative;

    width: 100%;
    height: 112px;

    overflow: hidden;

    background: #eef1f3;
  }

  body.cars-page .expected-car-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform .3s ease;
  }


  /* TEZ ORADA STATUS */

  body.cars-page .expected-car-status {
    position: absolute;

    top: 8px;
    left: 8px;

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

    min-height: 22px;

    padding: 0 8px;

    border: 1px solid rgba(255,255,255,.65);
    border-radius: 7px;

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

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

    color: #172631;

    font-size: 8px;
    line-height: 1;
    font-weight: 650;

    box-shadow: 0 4px 12px rgba(12, 28, 40, .07);
  }


  /* CARD BODY */

  body.cars-page .expected-car-body {
    padding: 11px;
  }


  /* MODEL */

  body.cars-page .expected-car-body h3 {
    min-height: 28px;

    margin: 0;

    color: #0b1116;

    font-size: 12px;
    line-height: 14px;
    font-weight: 700;

    letter-spacing: -0.2px;
  }


  /* SPECS */

  body.cars-page .expected-car-specs {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 7px;

    color: #7b858d;

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

    white-space: nowrap;
  }

  body.cars-page .expected-spec-dot {
    width: 3px;
    height: 3px;

    flex: 0 0 3px;

    border-radius: 50%;

    background: #b3bbc1;
  }


  /* BATAFSIL */

  body.cars-page .expected-car-details {
    width: 100%;
    height: 32px;

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

    margin-top: 11px;
    padding: 0 10px;

    border: 0;
    border-radius: 8px;

    background: #071827;
    color: #ffffff;

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

    box-shadow:
      0 6px 14px rgba(7,24,39,.10);
  }

  body.cars-page .expected-car-details span:last-child {
    font-size: 13px;
    font-weight: 400;
  }

}






/* =====================================================
   EXPECTED CARS — PREMIUM MOBILE CARD FINAL
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-car-card {
    overflow: hidden !important;
    border: 1px solid rgba(15, 32, 45, .07) !important;
    border-radius: 15px !important;
    background: #fff !important;

    box-shadow:
      0 7px 22px rgba(15, 32, 45, .045) !important;
  }


  /* RASM */

  body.cars-page .expected-car-image-wrap {
    position: relative !important;
    height: 120px !important;
    background: #f5f6f7 !important;
    overflow: hidden !important;
  }

  body.cars-page .expected-car-image {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center !important;
  }


  /* STATUS BADGE */

  body.cars-page .expected-car-status {
    position: absolute !important;
    z-index: 3 !important;

    top: 9px !important;
    left: 9px !important;

    min-height: 23px !important;
    padding: 0 9px !important;

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

    border: 0 !important;
    border-radius: 7px !important;

    background: #748ca9 !important;
    color: #fff !important;

    font-size: 8px !important;
    font-weight: 650 !important;

    box-shadow: 0 4px 12px rgba(36, 58, 78, .12) !important;
  }


  /* HEART */

  body.cars-page .expected-car-favorite {
    position: absolute !important;
    z-index: 4 !important;

    top: 9px !important;
    right: 9px !important;

    width: 27px !important;
    height: 27px !important;

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

    padding: 0 !important;
    border: 0 !important;

    border-radius: 50% !important;
    background: rgba(255,255,255,.88) !important;

    color: #172936 !important;

    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.cars-page .expected-car-favorite svg {
    width: 14px !important;
    height: 14px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* BODY */

  body.cars-page .expected-car-body {
    padding: 11px 10px 10px !important;
  }

  body.cars-page .expected-car-body h3 {
    min-height: 0 !important;
    margin: 0 !important;

    color: #0b1116 !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;

    letter-spacing: -.2px !important;
  }


  /* SPECS */

  body.cars-page .expected-car-specs {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin-top: 8px !important;

    color: #84909a !important;

    font-size: 8px !important;
    line-height: 1 !important;
  }


  /* PASTKI QATOR */

  body.cars-page .expected-car-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 5px !important;

    margin-top: 12px !important;
    padding-top: 9px !important;

    border-top: 1px solid #f0f2f4 !important;
  }


  /* CALENDAR + TEZ ORADA */

  body.cars-page .expected-car-arrival {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    color: #596975 !important;

    font-size: 7.8px !important;
    font-weight: 500 !important;

    white-space: nowrap !important;
  }

  body.cars-page .expected-car-arrival svg {
    width: 11px !important;
    height: 11px !important;

    fill: none !important;
    stroke: #253b4b !important;
    stroke-width: 1.7 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }


  /* BATAFSIL — ENDI QORA TUGMA EMAS */

  body.cars-page .expected-car-details {
    width: auto !important;
    height: auto !important;

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

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    color: #1473b9 !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    text-decoration: underline !important;
    text-underline-offset: 2px !important;

    box-shadow: none !important;

    white-space: nowrap !important;
  }

}


@media (max-width: 720px) {

  /* Avtomobil nomi */
  body.cars-page .expected-car-body h3 {
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }

  /* Elektr / Gibrid / AWD */
  body.cars-page .expected-car-specs {
    font-size: 9.5px !important;
    gap: 6px !important;
  }

  /* Pastdagi calendar + Tez orada */
  body.cars-page .expected-car-arrival {
    font-size: 9px !important;
    font-weight: 500 !important;
  }

  body.cars-page .expected-car-arrival svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Batafsil */
  body.cars-page .expected-car-details {
    font-size: 9.5px !important;
    font-weight: 600 !important;
  }

}

@media (max-width: 720px) {
  body.cars-page .expected-car-details {
    text-decoration: none !important;
  }
}




/* =====================================================
   EXPECTED CARS — PREMIUM NOTIFICATION CTA
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-notify-section {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 8px 16px 32px;

    background: #f8f9fa;
  }


  /* PREMIUM DARK BOX */

  body.cars-page .expected-notify-box {
    position: relative;
    overflow: hidden;

    width: 100%;
    box-sizing: border-box;

    padding: 22px 20px 20px;

    border-radius: 18px;

    background:
      linear-gradient(
        145deg,
        #0c2131 0%,
        #071724 55%,
        #05121c 100%
      );

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

    box-shadow:
      0 15px 35px rgba(5,20,32,.14),
      inset 0 1px 0 rgba(255,255,255,.06);
  }


  /* YENGIL PREMIUM GLOW */

  body.cars-page .expected-notify-box::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -90px;

    border-radius: 50%;

    background: rgba(92, 137, 170, .16);

    filter: blur(35px);

    pointer-events: none;
  }


  /* BELL ICON */

  body.cars-page .expected-notify-icon {
    position: relative;
    z-index: 2;

    width: 42px;
    height: 42px;

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

    margin-bottom: 16px;

    border-radius: 12px;

    color: #ffffff;

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

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

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  body.cars-page .expected-notify-icon svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* CONTENT */

  body.cars-page .expected-notify-content {
    position: relative;
    z-index: 2;
  }


  /* SMALL LABEL */

  body.cars-page .expected-notify-label {
    display: block;

    margin-bottom: 8px;

    color: #9fb2c1;

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

    font-weight: 700;

    letter-spacing: 1.6px;
  }


  /* TITLE */

  body.cars-page .expected-notify-content h2 {
    margin: 0;

    color: #ffffff;

    font-size: 23px;
    line-height: 1.05;

    font-weight: 750;

    letter-spacing: -.6px;
  }


  /* DESCRIPTION */

  body.cars-page .expected-notify-content p {
    max-width: 300px;

    margin: 12px 0 0;

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

    font-size: 10px;
    line-height: 1.5;

    font-weight: 400;
  }


  /* CTA BUTTON */

  body.cars-page .expected-notify-cta {
    width: 100%;
    height: 44px;

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

    margin-top: 18px;
    padding: 0 15px;

    border: 0;
    border-radius: 10px;

    background: #ffffff;
    color: #0b1c29;

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

    box-shadow:
      0 8px 20px rgba(0,0,0,.14);
  }

  body.cars-page .expected-notify-cta span:last-child {
    font-size: 17px;
    line-height: 1;
    font-weight: 400;
  }

}

@media (max-width: 720px) {
  body.cars-page .expected-notify-section {
    padding-top: 0 !important;
  }

  body.cars-page .expected-catalog {
    padding-bottom: 18px !important;
  }
}




/* =====================================================
   EXPECTED CARS — WHY FOLLOW BBA CARS
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-why {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 34px 16px 38px;
    background: #ffffff;
  }

  /* HEADER */

  body.cars-page .expected-why-header {
    margin-bottom: 22px;
  }

  body.cars-page .expected-why-label {
    display: block;
    margin-bottom: 8px;

    color: #71808b;

    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.7px;
  }

  body.cars-page .expected-why-header h2 {
    margin: 0;

    color: #0a0f14;

    font-size: 23px;
    line-height: 1.08;
    font-weight: 750;
    letter-spacing: -.7px;
  }

  body.cars-page .expected-why-header p {
    max-width: 320px;

    margin: 10px 0 0;

    color: #77838c;

    font-size: 10px;
    line-height: 1.5;
    font-weight: 400;
  }


  /* CARDS */

  body.cars-page .expected-why-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  body.cars-page .expected-why-card {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    box-sizing: border-box;

    padding: 14px;

    border: 1px solid rgba(12, 29, 42, .06);
    border-radius: 14px;

    background: #f8fafb;

    box-shadow:
      0 5px 16px rgba(12, 28, 40, .035),
      inset 0 1px 0 rgba(255,255,255,.95);
  }


  /* ICON */

  body.cars-page .expected-why-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;

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

    border-radius: 12px;

    background: #ffffff;
    color: #0a2233;

    border: 1px solid rgba(12,29,42,.055);

    box-shadow: 0 4px 12px rgba(12,28,40,.045);
  }

  body.cars-page .expected-why-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }


  /* TEXT */

  body.cars-page .expected-why-text {
    min-width: 0;
  }

  body.cars-page .expected-why-text h3 {
    margin: 0 0 5px;

    color: #101820;

    font-size: 11.5px;
    line-height: 1.15;
    font-weight: 700;
  }

  body.cars-page .expected-why-text p {
    margin: 0;

    color: #7a858d;

    font-size: 9px;
    line-height: 1.4;
    font-weight: 400;
  }

}


@media (max-width: 720px) {

  body.cars-page .expected-why {
    padding-top: 30px !important;
  }

  body.cars-page .expected-why-grid {
    gap: 11px !important;
  }

  body.cars-page .expected-why-card {
    min-height: 78px !important;
    padding: 14px 13px !important;
    gap: 13px !important;

    background: #ffffff !important;

    border: 1px solid rgba(12, 29, 42, .08) !important;
    border-radius: 14px !important;

    box-shadow:
      0 7px 20px rgba(12, 28, 40, .055) !important;
  }

  body.cars-page .expected-why-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;

    background: #f3f6f8 !important;
  }

  body.cars-page .expected-why-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  body.cars-page .expected-why-text h3 {
    margin-bottom: 5px !important;

    font-size: 12.5px !important;
    font-weight: 700 !important;
  }

  body.cars-page .expected-why-text p {
    font-size: 9.5px !important;
    line-height: 1.4 !important;
  }

}





/* =====================================================
   EXPECTED CARS — FINAL PREMIUM BANNER
===================================================== */

@media (max-width: 720px) {

  body.cars-page .expected-final {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 16px 38px;
    background: #ffffff;
  }

  body.cars-page .expected-final-box {
    position: relative;
    overflow: hidden;

    width: 100%;
    box-sizing: border-box;

    padding: 27px 21px 20px;

    border-radius: 19px;

    background:
      linear-gradient(
        145deg,
        #102a3d 0%,
        #081b2a 52%,
        #05131e 100%
      );

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

    box-shadow:
      0 16px 38px rgba(6,22,34,.15),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

  /* premium glow */

  body.cars-page .expected-final-box::before {
    content: "";

    position: absolute;

    width: 210px;
    height: 210px;

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

    border-radius: 50%;

    background: rgba(104, 151, 185, .18);
    filter: blur(45px);

    pointer-events: none;
  }

  body.cars-page .expected-final-label {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 10px;

    color: #a7bbc9;

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

    font-weight: 700;
    letter-spacing: 1.8px;
  }

  body.cars-page .expected-final-box h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.04;

    font-weight: 750;
    letter-spacing: -.8px;
  }

  body.cars-page .expected-final-box p {
    position: relative;
    z-index: 2;

    max-width: 310px;

    margin: 13px 0 0;

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

    font-size: 10px;
    line-height: 1.5;
  }

  /* BUTTON */

  body.cars-page .expected-final-button {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 46px;

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

    margin-top: 20px;
    padding: 0 15px;

    border: 0;
    border-radius: 11px;

    background: #ffffff;
    color: #0a1c29;

    font-size: 10.5px;
    font-weight: 650;

    box-shadow: 0 8px 22px rgba(0,0,0,.14);
  }

  body.cars-page .expected-final-arrow {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
  }

  /* BOTTOM STATUS */

  body.cars-page .expected-final-bottom {
    position: relative;
    z-index: 2;

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

    margin-top: 14px;

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

    font-size: 8px;
    line-height: 1.2;
  }

  body.cars-page .expected-final-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background: #7ba0ba;

    box-shadow: 0 0 8px rgba(123,160,186,.65);
  }

}



@media (max-width: 720px) {

  body.cars-page .expected-why-grid {
    gap: 8px !important;
  }

  body.cars-page .expected-why-card {
    min-height: 68px !important;
    padding: 11px 13px !important;
  }

  body.cars-page .expected-why {
    padding-bottom: 28px !important;
  }

}






/* =====================================================
   EXPECTED CARS — NOTIFICATION MODAL
===================================================== */

.expected-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.expected-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* BACKDROP */

.expected-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 14, 22, 0.68);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* MODAL BOX */

.expected-modal-box {
    position: relative;
    z-index: 2;

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

    padding: 34px 28px 26px;

    background: #ffffff;
    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28);

    transform: translateY(18px) scale(0.97);

    transition: transform 0.28s ease;
}

.expected-modal.active .expected-modal-box {
    transform: translateY(0) scale(1);
}


/* CLOSE */

.expected-modal-close {
    position: absolute;
    top: 16px;
    right: 18px;

    width: 34px;
    height: 34px;

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

    border: 0;
    border-radius: 50%;

    background: #f2f4f6;
    color: #111827;

    font-size: 23px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}


/* LABEL */

.expected-modal-label {
    display: inline-block;

    margin-bottom: 12px;

    color: #7189a6;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


/* TITLE */

.expected-modal-box h2 {
    margin: 0;

    color: #111827;

    font-size: 26px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.7px;
}


/* DESCRIPTION */

.expected-modal-box > p {
    margin: 14px 0 24px;

    color: #69717d;

    font-size: 14px;
    line-height: 1.55;
}


/* FORM */

#expectedNotifyForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#expectedNotifyForm label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

#expectedNotifyForm label > span {
    color: #313844;

    font-size: 12px;
    font-weight: 700;
}


/* INPUT */

#expectedNotifyForm input {
    width: 100%;
    height: 50px;

    padding: 0 15px;

    border: 1px solid #dfe3e8;
    border-radius: 11px;
    outline: none;

    background: #f8f9fa;

    color: #111827;

    font-size: 14px;

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

#expectedNotifyForm input:focus {
    background: #ffffff;
    border-color: #7a91ac;

    box-shadow:
        0 0 0 3px rgba(122, 145, 172, 0.12);
}


/* SUBMIT */

.expected-modal-submit {
    width: 100%;
    height: 52px;

    margin-top: 3px;
    padding: 0 17px;

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

    border: 0;
    border-radius: 11px;

    background: #111b2a;
    color: #ffffff;

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

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.expected-modal-submit:active {
    transform: scale(0.985);
}


/* NOTE */

.expected-modal-note {
    display: block;

    margin-top: 16px;

    color: #9aa1aa;

    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}


/* MOBILE */

@media (max-width: 720px) {

    .expected-modal {
        padding: 16px;
    }

    .expected-modal-box {
        max-width: 390px;
        padding: 30px 20px 22px;
        border-radius: 18px;
    }

    .expected-modal-box h2 {
        padding-right: 20px;
        font-size: 22px;
        line-height: 1.15;
    }

    .expected-modal-box > p {
        margin: 12px 0 20px;
        font-size: 12.5px;
    }

    #expectedNotifyForm input {
        height: 48px;
        font-size: 13px;
    }

    .expected-modal-submit {
        height: 49px;
    }
}







/* =========================================
   EXPECTED CARS — LOADING SPINNER
========================================= */

.expected-modal-submit:disabled {
    cursor: not-allowed;
    opacity: 0.9;
}

.expected-modal-submit.expected-submit-loading {
    justify-content: center;
    gap: 10px;
}

.expected-submit-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;

    animation: expectedSpin 0.7s linear infinite;
}

@keyframes expectedSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   EXPECTED CARS — SUCCESS MODAL
========================================= */

.expected-success-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;

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

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

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

.expected-success-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.expected-success-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(8, 14, 22, 0.68);

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

.expected-success-box {
    position: relative;
    z-index: 2;

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

    padding: 34px 24px 24px;

    background: #ffffff;
    border-radius: 20px;

    text-align: center;

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);

    transform: translateY(15px) scale(0.97);
    transition: transform 0.25s ease;
}

.expected-success-modal.active .expected-success-box {
    transform: translateY(0) scale(1);
}

.expected-success-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background: #111b2a;
    color: #ffffff;

    font-size: 27px;
    font-weight: 700;
}

.expected-success-box h2 {
    margin: 0;

    color: #111827;

    font-size: 23px;
    line-height: 1.2;
    font-weight: 800;
}

.expected-success-box p {
    margin: 12px 0 22px;

    color: #737b86;

    font-size: 13px;
    line-height: 1.55;
}

.expected-success-close {
    width: 100%;
    height: 49px;

    border: 0;
    border-radius: 11px;

    background: #111b2a;
    color: #ffffff;

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

    cursor: pointer;
}


body.cars-page .expected-car-favorite.active {
    background: #111827 !important;
    color: #ffffff !important;
}

body.cars-page .expected-car-favorite.active svg {
    fill: currentColor !important;
}


@media (max-width: 720px) {
    body.cars-page .mobile-cars-head {
        padding-top: 75px !important;
    }
}



@media (max-width: 720px) {
    body.cars-page .site-footer {
        padding-bottom: 80px !important;
    }
}


@media (max-width: 720px) {
    body.cars-page .cars-section {
        min-height: calc(100vh - 430px) !important;
    }
}















/* Expected Cars — faqat mobil */
@media (min-width: 721px) {
    body:has(.expected-hero) main,
    body:has(.expected-hero) .site-footer {
        display: none !important;
    }
}









/* =========================================
   DESKTOP / TABLET LANGUAGE SWITCHER
========================================= */

.desktop-language-switcher {
    display: flex;
    align-items: center;
    gap: 2px;

    height: 34px;
    padding: 3px;

    background: #f3f6f8;
    border: 1px solid rgba(16, 38, 59, 0.08);
    border-radius: 10px;

    flex-shrink: 0;
}

.desktop-lang-btn {
    height: 26px;
    min-width: 34px;
    padding: 0 8px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #708090;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

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

.desktop-lang-btn:hover {
    color: #10263b;
}

.desktop-lang-btn.active {
    background: #10263b;
    color: #ffffff;

    box-shadow:
        0 2px 7px rgba(16, 38, 59, 0.16);
}

/* MOBILDA KO‘RINMAYDI */
@media (max-width: 720px) {
    .desktop-language-switcher {
        display: none !important;
    }
}








/* =========================================
   BBA CARS — EXPECTED COUNTDOWN BANNER FINAL
========================================= */

.bba-countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 30px;

    background: rgba(15, 23, 32, 0.30);

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

    animation: bbaCountdownFadeIn .3s ease;
}


/* BANNER */

.bba-countdown-banner {
    position: relative;

    width: min(1420px, 94vw);
    min-height: 255px;

    display: grid;
    grid-template-columns: 30% 70%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid rgba(16, 38, 59, 0.06);
    border-radius: 32px;

    box-shadow:
        0 30px 90px rgba(12, 28, 43, 0.18);
}


/* CLOSE */

.bba-countdown-close {
    position: absolute;

    top: 22px;
    right: 24px;

    z-index: 10;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    color: #687580;

    font-size: 31px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;
}


/* IMAGE */

.bba-countdown-image {
    min-width: 0;
    min-height: 255px;

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

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fafb 0%,
            #f1f4f6 100%
        );
}

.bba-countdown-image img {
    width: 100%;
    height: 255px;

    display: block;

    object-fit: cover;
    object-position: center;
}


/* CONTENT */

.bba-countdown-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 34px 48px 32px 42px;
}


/* TITLE */

.bba-countdown-text h2 {
    margin: 0 55px 5px 0;

    color: #0b1118;

    font-size: clamp(26px, 2.1vw, 36px);
    line-height: 1.08;

    font-weight: 800;
    letter-spacing: -1px;
}


/* DESCRIPTION */

.bba-countdown-text p {
    margin: 0;

    color: #77828d;

    font-size: 15px;
    line-height: 1.45;
}


/* BOTTOM */

.bba-countdown-bottom {
    margin-top: 27px;

    display: flex;
    align-items: center;

    gap: 20px;
}


/* TIME LABEL */

.bba-countdown-label {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #697682;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
}

.bba-countdown-clock {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border: 1px solid #e4e9ed;
    border-radius: 50%;

    background: #f5f7f9;

    color: #65727d;

    font-size: 25px;
}


/* COUNTDOWN */

.bba-countdown-time {
    display: flex;
    align-items: center;

    gap: 7px;
}

.bba-countdown-time > div {
    width: 78px;
    height: 78px;

    display: flex;
    flex-direction: column;

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

    border: 1px solid #e8ecef;
    border-radius: 13px;

    background: #f7f8fa;
}

.bba-countdown-time strong {
    color: #0d1520;

    font-size: 29px;
    font-weight: 800;
    line-height: 1;
}

.bba-countdown-time span {
    margin-top: 7px;

    color: #7c8791;

    font-size: 12px;
    font-weight: 500;
}

.bba-countdown-time > b {
    color: #8d969e;

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


/* DETAILS BUTTON */

.bba-countdown-details {
    min-width: 245px;
    height: 62px;

    margin-left: auto;
    padding: 0 28px;

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

    gap: 20px;

    border-radius: 15px;

    background: #081827;
    color: #ffffff;

    text-decoration: none;

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

    white-space: nowrap;
}

.bba-countdown-details span {
    font-size: 24px;
    font-weight: 300;
}


/* CLOSING */

.bba-countdown-overlay.closing {
    opacity: 0;
    transition: opacity .3s ease;
}


@keyframes bbaCountdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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


/* =========================================
   IPAD / SMALL DESKTOP
========================================= */

@media (max-width: 1180px) {

    .bba-countdown-banner {
        width: min(940px, 95vw);
        min-height: 230px;

        grid-template-columns: 31% 69%;
    }

    .bba-countdown-image,
    .bba-countdown-image img {
        min-height: 230px;
        height: 230px;
    }

    .bba-countdown-content {
        padding: 30px 34px;
    }

    .bba-countdown-text h2 {
        font-size: 27px;
    }

    .bba-countdown-bottom {
        gap: 13px;
    }

    .bba-countdown-clock {
        width: 38px;
        height: 38px;
        flex-basis: 38px;

        font-size: 21px;
    }

    .bba-countdown-label {
        font-size: 11px;
        gap: 8px;
    }

    .bba-countdown-time {
        gap: 4px;
    }

    .bba-countdown-time > div {
        width: 59px;
        height: 64px;
    }

    .bba-countdown-time strong {
        font-size: 23px;
    }

    .bba-countdown-time span {
        font-size: 9px;
        margin-top: 5px;
    }

    .bba-countdown-time > b {
        font-size: 17px;
    }

    .bba-countdown-details {
        min-width: 175px;
        height: 52px;

        padding: 0 18px;

        gap: 12px;

        font-size: 12px;
    }
}



/* =========================================
   BBA CARS COUNTDOWN — PREMIUM MOBILE
========================================= */

@media (max-width: 720px) {

    .bba-countdown-overlay {
        padding: 16px;
        align-items: center;
    }

    .bba-countdown-banner {
        width: 100%;
        max-width: 390px;
        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        border-radius: 24px;
        background: #fff;

        box-shadow:
            0 25px 70px rgba(8, 24, 39, .22);
    }

    /* RASM */

    .bba-countdown-image {
        width: 100%;
        height: 205px;
        min-height: 205px;

        background: #f4f6f7;
    }

    .bba-countdown-image img {
        width: 100%;
        height: 100%;
        min-height: 0;

        object-fit: cover;
        object-position: center;
    }

    /* X */

    .bba-countdown-close {
        top: 14px;
        right: 14px;

        width: 36px;
        height: 36px;

        border-radius: 50%;

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

        color: #5f6b75;

        font-size: 26px;

        box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
    }

    /* CONTENT */

    .bba-countdown-content {
        width: 100%;
        min-width: 0;

        padding: 24px 20px 20px;
    }

    .bba-countdown-text h2 {
        margin: 0;

        color: #0b1118;

        font-size: 25px;
        font-weight: 800;
        line-height: 1.12;

        letter-spacing: -.6px;
    }

    .bba-countdown-text p {
        margin: 8px 0 0;

        color: #78838d;

        font-size: 12px;
        line-height: 1.5;
    }

    /* KELISH VAQTI */

    .bba-countdown-bottom {
        margin-top: 20px;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 14px;
    }

    .bba-countdown-label {
        display: flex;
        align-items: center;

        gap: 9px;

        color: #66737e;

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

    .bba-countdown-clock {
        width: 32px;
        height: 32px;

        flex: 0 0 32px;

        font-size: 18px;

        background: #f4f6f8;
        border: 1px solid #e6eaed;
    }

    /* TIMER */

    .bba-countdown-time {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr auto
            1fr auto
            1fr auto
            1fr;

        align-items: center;

        gap: 5px;
    }

    .bba-countdown-time > div {
        width: 100%;
        height: 70px;

        border: 1px solid #e8ecef;
        border-radius: 12px;

        background: #f7f8fa;
    }

    .bba-countdown-time strong {
        color: #0b1118;

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

    .bba-countdown-time span {
        margin-top: 5px;

        color: #7c8791;

        font-size: 10px;
    }

    .bba-countdown-time > b {
        color: #89939b;

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

    /* BUTTON */

    .bba-countdown-details {
        width: 100%;
        min-width: 0;
        height: 52px;

        margin: 2px 0 0;
        padding: 0 20px;

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

        gap: 14px;

        border-radius: 12px;

        background: #081827;
        color: #fff;

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

    .bba-countdown-details span {
        font-size: 20px;
    }
}