@font-face {
    font-family: "Druk Cyr";
    src: url(DrukCyr-Medium.ttf);
}

::-webkit-scrollbar {
    display: none
}

.showroom {
    position: absolute;
    user-select: none;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: url(assets/bg.png) no-repeat;
    background-size: 100% 100%;
    visibility: hidden;
}

.top-part {
    position: absolute;
    width: 68px;
    height: 93px;
    left: 98px;
    top: 58px;
    background: url(assets/s.png);
    mix-blend-mode: luminosity;
    z-index: 2;
}

.top-how {
    position: absolute;
    width: 189px;
    height: 89px;
    left: 123px;
    top: 52px;
    background: url(assets/howroom.png);
    background-size: cover;
    z-index: 1;
}

.top-glow {
    position: absolute;
    width: 74px;
    height: 74px;
    left: 98px;
    top: 72px;
    background: rgba(21, 180, 103, 1);
    filter: blur(50px);
}

.top-description {
    position: absolute;
    width: 219px;
    height: 49px;
    left: 98px;
    top: 131px;
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    text-align: right;
    color: rgba(255, 255, 255, 0.5);
}

.category-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: 98px;
    margin-top: 240px;
}

.category {
    width: 385px;
    height: 100px;
    background: url(assets/categorybox.png);
    background-size: cover;
    z-index: 9999;
}

.titles {
    margin: 20px;
    color: #fff;
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
}

.titles::first-letter {
    text-transform: uppercase;
}

.description {
    margin: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    margin-top: -12px;
}


.cars-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 113px;
    margin-top: 255px;
    overflow-y: auto;
    max-height: 825px;
    padding-right: 10px;
}

.cars {
    width: 318px;
    height: 180px;
    background: url(assets/carsbox.png);
    background-size: cover;
    z-index: 1;
    margin-bottom: 16px;
}

.car-name {
    margin: 25px;
    font-family: 'Druk Cyr';
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    background: radial-gradient(73.91% 73.91% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    margin-top: 8px;
}

.price-box {
    width: 58px;
    height: 16px;
    margin: 25px;
    background: rgba(0, 170, 255, 0.15);
    border-radius: 2px;
    margin-top: -25px;
}

.price {
    text-align: center;
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    color: rgba(21, 180, 103, 1);
    text-shadow: 0px 0px 20px rgba(21, 180, 103, 1);
}

.type-box {
    width: 55px;
    height: 16px;
    margin: 88px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: -41px;
}

.type {
    text-align: center;
    font-family: 'Gilroy';
    font-style: normal;
    font-weight: 400;
    font-size: 10px;
    color: #fff;
    text-shadow: 0px 0px 20px rgba(21, 180, 103, 1);
}

.car-img {
    width: 302px;
    height: 172px;
    margin: 0px;
    margin-top: -140px;
}

.exit {
    position: absolute;
    width: 122px;
    height: 49px;
    left: 1725px;
    top: 91px;
    background: url(assets/exit.png);
    background-size: cover;
}

.category:hover, .cars:hover, .exit:hover {
    opacity: 0.45;
    transition: .7s;
}

.details {
    display: flex;
    flex-direction: column;
    gap: 1.5vw;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-right: 1vw;
    padding-bottom: 1vw;
}

.details > div:first-child {
    display: flex;
    gap: 1.5vw;
}

.details > div:first-child > div {
    display: flex;
    gap: .5vw;
}

.details > div:first-child > div > div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .4vw;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 20px 0px #FFFFFF40;
    border-radius: 50%;
}

.details > div:first-child > div > div:first-child > img {
    width: 1.5vw;
    height: 1.5vw;
}

.details > div:first-child > div > div:last-child {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.details > div:first-child > div > div:last-child > span {
    font-family: Gilroy;
    font-weight: 500;
    color: #FFFFFF;
}

.details > div:first-child > div > div:last-child > span:last-child {
    font-family: Gilroy;
    color: #FFFFFF80;
}

.details > .colors {
    display: flex;
    gap: 1vw;
}

.details > .colors > .border-color {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.823vw; 
    height: 1.823vw; 
    border: 1px solid #fff; 
    padding: .1vw;
    border-radius: 50%;
}

.details > .colors > .border-color > .color {
    background-color: red;
    width: 90%;
    height: 90%;
    border-radius: 50%;
}

.color:hover {
    opacity: 0.50;
    transition: .7s;
}

.details > .checkout {
    display: flex;
}

.details > .checkout > div:first-child {
    display: flex;
    gap: .5vw;
}

.details > .checkout > div:first-child > button,
.details > .checkout > div:first-child > .cash,
.details > .checkout > div:first-child > .card {
    position: relative;
    width: 2.4vw;
    height: 2.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Gilroy;
    color: #FFFFFF80;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) -29.41%, rgba(191, 191, 191, 0.25) 100%);
    border: none;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease;
}

.details > .checkout > div:first-child > button::before,
.details > .checkout > div:first-child > .cash::before,
.details > .checkout > div:first-child > .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 152.94%);
    border-radius: 5px;
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.details > .checkout > div:first-child > button:hover,
.details > .checkout > div:first-child > .cash:hover,
.details > .checkout > div:first-child > .card:hover {
    background-color: #FFFFFF;
    color: #000;
    box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.15);
}

.details > .checkout > div:first-child > button {
    width: 6vw;
    text-transform: uppercase;
}

.details > .checkout > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .2vw;
    width: 100%;
}

.details > .checkout > div:last-child > div {
    display: flex;
    align-items: flex-start;
    gap: .5vw;
}

.details > .checkout > div:last-child > div > span {
    font-family: Gilroy;
    color: #fff;
    font-size: 1vw;
}

.details > .checkout > div:last-child > div > span:last-child {
    font-size: .8vw;
    padding: .2vw;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px #FFFFFF40;
    color: #000;
}

.details > .checkout > div:last-child > span {
    text-align: end;
    font-family: Gilroy;
    width: 12vw;
    font-size: .6vw;
    color: #FFFFFF80;
}