/*
CreaLabs Agency Studio
ASEL Turizm V43.6.0 DB Driven Fleet Media
*/

.as-fleet-db-section .as-fleet-showcase-media img {
    background: #dce7f2;
}

.as-fleet-db-section .as-fleet-showcase-card {
    min-height: 100%;
}

.as-vehicle-detail {
    padding: 150px 0 100px;
    color: #fff;
    background:
        radial-gradient(
            circle at 84% 4%,
            rgba(67, 211, 255, .16),
            transparent 30%
        ),
        #031329;
}

.as-vehicle-detail-shell,
.as-related-fleet-shell {
    width: min(1480px, calc(100% - 56px));
    margin-inline: auto;
}

.as-vehicle-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 30px;
    color: #8da5bd;
    font-size: 12px;
    font-weight: 700;
}

.as-vehicle-breadcrumb a {
    color: #56d9ff;
}

.as-vehicle-breadcrumb b {
    color: #fff;
}

.as-vehicle-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.16fr)
        minmax(420px, .84fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: center;
}

.as-vehicle-detail-media {
    position: relative;
    min-height: 640px;
    overflow: hidden;
    border: 1px solid rgba(112, 198, 255, .22);
    border-radius: 30px;
    background: #dce7f2;
    box-shadow:
        0 36px 100px rgba(0, 7, 23, .42);
}

.as-vehicle-detail-media img {
    width: 100%;
    height: 100%;
    min-height: 640px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.as-vehicle-detail-type,
.as-vehicle-db-badge {
    position: absolute;
    z-index: 3;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 99px;
    color: #fff;
    background: rgba(3, 19, 41, .62);
    backdrop-filter: blur(14px);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.as-vehicle-detail-type {
    top: 22px;
    left: 22px;
}

.as-vehicle-db-badge {
    right: 22px;
    bottom: 22px;
    color: #73e2ff;
}

.as-vehicle-detail-copy h1 {
    margin: 15px 0 9px;
    color: #fff;
    font-size: clamp(50px, 6vw, 82px);
    line-height: .98;
    letter-spacing: -.065em;
}

.as-vehicle-detail-brand {
    margin: 0;
    color: #9bb4cd;
    font-size: 18px;
    font-weight: 700;
}

.as-vehicle-detail-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
}

.as-vehicle-detail-specs article {
    min-height: 104px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid rgba(115, 190, 239, .16);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 48, 91, .78),
            rgba(4, 28, 58, .72)
        );
}

.as-vehicle-detail-specs small {
    color: #7f9bb7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.as-vehicle-detail-specs b {
    color: #fff;
    font-size: 16px;
}

.as-vehicle-detail-features {
    margin-top: 34px;
}

.as-vehicle-detail-features h2 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 22px;
}

.as-vehicle-detail-features > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.as-vehicle-detail-features span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border: 1px solid rgba(103, 188, 238, .16);
    border-radius: 11px;
    color: #bfd1e2;
    background: rgba(6, 38, 75, .58);
    font-size: 11px;
    font-weight: 700;
}

.as-vehicle-detail-features i {
    color: #4ddcff;
    font-style: normal;
}

.as-vehicle-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 38px;
}

.as-related-fleet {
    padding: 90px 0 110px;
    background: #f4f7fb;
}

.as-related-fleet .as-section-heading {
    margin-bottom: 34px;
}

.as-related-fleet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.as-related-fleet-grid article {
    overflow: hidden;
    border: 1px solid rgba(9, 53, 103, .11);
    border-radius: 20px;
    background: #fff;
    box-shadow:
        0 20px 55px rgba(7, 34, 75, .09);
}

.as-related-fleet-image {
    display: block;
    height: 260px;
    overflow: hidden;
    background: #dce7f2;
}

.as-related-fleet-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.as-related-fleet-grid article > div {
    padding: 22px;
}

.as-related-fleet-grid h3 {
    margin: 0;
    color: #071a39;
    font-size: 22px;
}

.as-related-fleet-grid p {
    margin: 8px 0 18px;
    color: #75879c;
    font-size: 12px;
}

.as-related-fleet-grid article > div > a {
    color: #0b7ee8;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 1040px) {
    .as-vehicle-detail-grid {
        grid-template-columns: 1fr;
    }

    .as-vehicle-detail-copy {
        max-width: 800px;
    }

    .as-related-fleet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .as-vehicle-detail {
        padding: 120px 0 76px;
    }

    .as-vehicle-detail-shell,
    .as-related-fleet-shell {
        width: min(100% - 28px, 1480px);
    }

    .as-vehicle-detail-media,
    .as-vehicle-detail-media img {
        min-height: 420px;
    }

    .as-vehicle-detail-copy h1 {
        font-size: 46px;
    }

    .as-vehicle-detail-specs {
        grid-template-columns: 1fr;
    }

    .as-related-fleet-grid {
        grid-template-columns: 1fr;
    }

    .as-related-fleet-image {
        height: 240px;
    }
}