/* ######## cruise ######## */
#trucks{
    background: var(--trBlack);
    clip-path: polygon(0 0,100% 10%,100% 100%,0 90%);
}

.truck-photo{
    position: relative;
    min-height: 100vh;
}

.truckh{
    width: 25%;
    height: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.truckv{
    height: 25%;
    width: auto;
    position: absolute;
    transition: all 2s ease-in-out;
}

.truckh:hover, .truckv:hover{
    z-index: 50;
    transform: scale(1.5);
}

.truck-1{
    top: 2%;
    left: 10%;
    transform: rotate(-15deg);
    z-index: 20;
}

.truck-2{
    top: 37%;
    left: 41%;
    transform: rotate(-8deg);
    z-index: 30;
}

.truck-3{
    top: 10%;
    left: 66%;
    transform: rotate(-14deg);
    z-index: 20;
}

.truck-4{
    top: 17%;
    left: 25%;
    transform: rotate(-38deg);
    z-index: 25;
}

.truck-5{
    top: 30%;
    left: 10%;
    transform: rotate(6deg);
    z-index: 10;
}

.truck-6{
    top: 8%;
    left: 44%;
    transform: rotate(12deg);
    z-index: 30;
}

.truck-7{
    top: 36%;
    left: 64%;
    transform: rotate(14deg);
    z-index: 10;
}

.truck-8{
    top: 57%;
    left: 67%;
    transform: rotate(15deg);
    z-index: 20;
}

.truck-9{
    top: 65%;
    left: 39%;
    transform: rotate(-13deg);
    z-index: 10;
}

.truck-10{
    top: 51%;
    left: 14%;
    transform: rotate(-25deg);
    z-index: 30;
}

.truck-11{
    top: 68%;
    left: 9%;
    transform: rotate(15deg);
    z-index: 30;
}

.truck-12{
    top: 75%;
    left: 67%;
    transform: rotate(-11deg);
    z-index: 30;
}