.rental-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    position: relative;
    padding: 0 60px;
    overflow: hidden;
}

@media (max-width: 1800px) {
    .rental-section {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 1500px) {
    .rental-section {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 1200px) {
    .rental-section {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.rental-section .catalog-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

@media (max-width: 997px) {
    .rental-section .catalog-content {
        gap: 20px;
    }
}

.rental-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    position: relative;
}

.rental-section .title-container {
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}

.rental-section .section-title {
    color: #121212;
    letter-spacing: -1.2px;
    position: relative;
    font: 600 40px/110% Manrope, -apple-system, Roboto, Helvetica, sans-serif;
    margin: 0;
}

@media (max-width: 997px) {
    .rental-section .section-title {
        font-size: 24px;
    }
}

.rental-section .navigation-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.rental-section .nav-button {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #e7e7e7;
    position: relative;
    cursor: pointer;
    background-color: #fff;
}

.rental-section .nav-button:hover {
    background-color: #f5f5f5;
    border-color: #d1d1d1;
}

.rental-section .arrow-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.rental-section .nav-button:first-child svg {
    transform: rotate(360deg);
}

.rental-section .vehicles-container {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 25px;
    transition: all 0.3s ease;
    width: 100%;
    position: relative;
}

.rental-section .vehicle-card,
.rental-section .vehicle-card a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    flex-shrink: 0;
    width: calc(calc(100% / 3) - 25px);
}

.rental-section .vehicle-card:after {
    content: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' rx='10' fill='%2331C55D'/%3E%3Cpath d='M25.829 20.9141H20.244C19.9788 20.9141 19.7244 20.8087 19.5369 20.6212C19.3494 20.4336 19.244 20.1793 19.244 19.9141C19.244 19.6489 19.3494 19.3945 19.5369 19.207C19.7244 19.0194 19.9788 18.9141 20.244 18.9141H28.244C28.3754 18.9137 28.5057 18.9393 28.6272 18.9894C28.7487 19.0395 28.8591 19.1131 28.952 19.2061C29.0449 19.299 29.1186 19.4094 29.1687 19.5309C29.2188 19.6524 29.2444 19.7826 29.244 19.9141V27.9141C29.244 28.1793 29.1387 28.4336 28.9511 28.6212C28.7636 28.8087 28.5092 28.9141 28.244 28.9141C27.9788 28.9141 27.7244 28.8087 27.5369 28.6212C27.3494 28.4336 27.244 28.1793 27.244 27.9141V22.3281L20.465 29.1071C20.2774 29.2946 20.0229 29.3999 19.7577 29.3998C19.4924 29.3997 19.238 29.2942 19.0505 29.1066C18.863 28.9189 18.7577 28.6645 18.7578 28.3992C18.7579 28.1339 18.8634 27.8796 19.051 27.6921L25.829 20.9141Z' fill='white'/%3E%3C/svg%3E");
    display: none;
    right: 0;
    bottom: -5px;
    position: absolute;
}

.rental-section .vehicle-card:hover:after {
    display: block;
}

@media (max-width: 1200px) {
    .rental-section .vehicle-card {
        width: calc(calc(100% / 2) - 25px);
    }
}

@media (max-width: 997px) {
    .rental-section .vehicle-card {
        width: calc(100% - 25px);
    }
}

.rental-section .vehicle-card a {
    text-decoration: none;
    width: 100%;
}

.rental-section .vehicle-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #FFFFFF;
    border-radius: 16px;
    position: relative;
    object-fit: cover;
    object-position: center;
    display: block;
}

.rental-section .vehicle-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    position: relative;
    padding-right: 60px;
}

.rental-section .vehicle-name {
    width: 100%;
    color: #121212;
    letter-spacing: -0.4px;
    position: relative;
    font: 600 20px/113% Manrope, -apple-system, Roboto, Helvetica, sans-serif;
    margin: 0;
}

.rental-section .vehicle-details {
    width: 100%;
    color: #8c8c8c;
    letter-spacing: -0.54px;
    position: relative;
    font: 500 18px/115% Manrope, -apple-system, Roboto, Helvetica, sans-serif;
    margin: 0;
}

.rental-section .view-all-button {
    display: flex;
    height: 50px;
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    border: 1px solid #e7e7e7;
    background-color: #fff;
}

.rental-section .view-all-button:hover {
    background-color: #31c55d;
    border-color: #31c55d;
}

.rental-section .button-text {
    color: #31c55d;
    letter-spacing: -0.48px;
    position: relative;
    font: 700 16px/100% Manrope, -apple-system, Roboto, Helvetica, sans-serif;
}

.rental-section .view-all-button:hover .button-text {
    color: #ffffff;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .rental-section .nav-button,
    .rental-section .view-all-button {
        border-width: 2px;
    }

    .rental-section .section-title,
    .rental-section .vehicle-name {
        color: #000;
    }

    .rental-section .vehicle-details {
        color: #666;
    }
}