:root {
    --brand-clr: 27, 25, 25;
    --navbar-height: 80px;
}

body {
    font-family: "Jost", sans-serif;
    font-weight: bold;
}

nav.navbar {
    background-color: rgb(var(--brand-clr)) !important;
    max-height: var(--navbar-height);
    position: fixed;
    width: 100%;
    z-index: 100;
}

.main {
    margin-top: var(--navbar-height);
}

nav.navbar .navbar-brand img {
    max-height: calc(var(--navbar-height) - 20px);
    transform: scale(1.5) translateY(2px);
}

.title {
    font-family: "Alata", sans-serif;
    letter-spacing: 1.9px;
    font-weight: bold;
}

.car-brand,
.accessory {
    max-width: 500px;
    width: 100%;
}

.car-brand a {
    color: var(--bs-dark);
}

.brand-image,
.car-image,
.accessory-image {
    max-width: 500px;
    object-fit: contain;
    aspect-ratio: 3 / 2;
    width: 100%;
}

.brand-name {
    text-align: center;
}

#accessoryModal .modal-body img {
    width: 100%;
}

.carousel.pointer-event {
    touch-action: pan-y pinch-zoom;
}

.carousel-control-prev,
.carousel-control-next {
    background-color: black;
    border-radius: 50rem;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 50px;
}

.carousel-indicators {
    background-color: rgba(0, 0, 0, 0.35);
    height: 10px;
    border-radius: 50rem;
    overflow: hidden;
}

.carousel-indicators [data-bs-target] {
    position: relative;
    top: -6px;
}