.vehicle-details{
    background-color: #242424;
}

.vehicle-details-container {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 0px;

    opacity: 0;
    transform: translate3d(0, 500px, 0);
    animation: arrive 500ms ease-in-out 0.5s forwards;
}

.recent-actions-information {
    grid-area: 1 / 1 / 2 / 2; 
}

.vehicle-information {
    grid-area: 1 / 2 / 2 / 3; 
    display: flex;
    align-items: center;
    justify-content: center;
    
}


.vehicle-details-card {

    width: 100%;
    height: 100%;
    margin: auto;
    overflow: hidden;
    padding: 0 20px;
    background: rgb(45, 51, 68);
    padding: 30px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    flex-direction: column;
    transform: scale(0.95);
    transition: box-shadow 0.5s, transform 0.5s;

}

.vehicle-details-buttons{
    display: flex;
    justify-content: space-between;
    gap: 2em;
}

.vehicle-details-buttons a{
   background-color: transparent;
   transition: all 0.3s ease 0s;
}


.vehicle-details-information {
    font-size: 25px;
    margin: 10px 0;
}

.vehicle-details-image {
    width: 700px;
    height: 500px;
    object-fit: cover;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 19px 51px 0 rgba(0, 0, 0, 0.16), 0 14px 19px 0 rgba(0, 0, 0, 0.07);
}

.vehicle-details-card-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0.3em;
    justify-content: space-between;
}


.vehicle-details-card:hover {
    transform: scale(1.1);
    transition: box-shadow 0.5s, transform 0.5s;
}

.vehicle-details-card:hover {
    transform: scale(1);
    box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}